CSS accent-color + 自己封装 radio

柔光的暖阳◎ 2024-05-24 04:34 31阅读 0赞

### `accent-color` \+ 自己封装 `radio` ###

#### `accent-color` 的基本知识 ####

用来改变某些元素的控件的 `accent` 颜色.

什么是 `accent` 颜色呢? 它是一种典型的明亮颜色, 与配色方案中更实用的背景和前景颜色形成对比. 在开发中, `<input>` 元素的活动部分的背景颜色就可以用 `accent-color` 来设置, 比如 `checkbox` 的选中框的颜色.

`accent-color` 支持 `auto` 关键字和常用的 `<color>` 类型的数值. 其中 `auto` 表示浏览器自己选择颜色. 例如下图就是 `radio` 选中时在不同浏览器下的表现.

![在这里插入图片描述][0b3f9beb01964601ac5f7c18c71dfa93.png_pic_center]

那么通过 `accent-color` 我们可以控制那些元素呢? [MDN 官方文档][MDN] 给出了四种

*  `<input type="checkbox">`
 *  `<input type="radio">`
 *  `<input type="range">`
 *  `<progress>`

<div>
      <input type="checkbox" id="apple" />
      <label for="apple">Apple</label>
    </div>
    <div>
      <input type="radio" id="male" name="sex" />
      <label for="male">Man</label>
      <input type="radio" id="female" name="sex" />
      <label for="female">Woman</label>
    </div>
    <div>
      <input type="range" id="volume" name="volume"
              min="0" max="11">
      <label for="volume">Volume</label>
    </div>
    <progress id="file" max="100" value="70"> 70% </progress>

input, progress {
        
      accent-color: #e67e22;
    }

![在这里插入图片描述][753d3485665048e8bea5475e8558ae42.png_pic_center]

?值得注意的一点是, `checkbox` 选中时对号的颜色是会根据 `accent-color` 的颜色变化的. 如果 `accent-color` 是浅蓝色, 那么对号就是黑色; 如果是红色, 对号就是白色.

![在这里插入图片描述][8042c1b531f7471eabe9a96f0ccfb350.png_pic_center]

#### 自己封装 `radio` ####

其实你会发现应用了 `accent-color` 的 `radio` 其实很丑, 我找了很多也找不到有 `CSS` 属性来修改黑色圆环的颜色. 索性我自己写一个把, 参考了 `Element UI` 和 `Vuetify` 实现的思路, 我写的比较简单.

首先, 使用 `opacity:0` 隐藏原生的 `radio`. 然后设置 `.indicator` 为外面的圆环, 使用 `::before` 伪元素为选中时的填充. 当然不要忘记填充默认情况是不显示的, 这一点通过 `scale(0)` 实现

.my_radio input {
        
      opacity: 0;
    }
    .my_radio {
        
      display: inline-block;
      position: relative;
    }
    .my_radio .indicator {
        
      width: 14px;
      height: 14px;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      border: 2px solid salmon;
    }
    .my_radio .indicator::before {
        
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      transform: scale(0);
      background-color: salmon;
      border-radius: 50%;
      transition: .2s ease;
    }

最后呢, 通过 `HTML` 的元素位置关系, 使用 `:checked` 伪类元素选择器表示 `radio` 选中时, 使用 `+` 相邻兄弟选择器选中后面的填充让其出现.

.my_radio input:checked + .indicator::before {
        
      transform: scale(.65);
    }
    .my_radio span {
        
      cursor: pointer;
    }

最后, 来看效果吧~

![在这里插入图片描述][84bd3b7012e045b982df5429a7700d24.gif_pic_center]

谢谢你看到这里?

[0b3f9beb01964601ac5f7c18c71dfa93.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/fc429ea5b22840b69e05bd23e026315f.png
[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
[753d3485665048e8bea5475e8558ae42.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/0ea93e78180643678fd0f1b9737fc6ba.png
[8042c1b531f7471eabe9a96f0ccfb350.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/a523080d34d74f10b428f56526054c21.png
[84bd3b7012e045b982df5429a7700d24.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/7637bf002c8d4c4d8293e817b4bea48d.gif