1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色

掘金安东尼

发布于 2022-12-07 14:13:56

8430

发布于 2022-12-07 14:13:56

文章被收录于专栏：掘金安东尼掘金安东尼

accent-color

accent-color 是 CSS 2022 年推出的一个新属性；

总所周知，CSS 属性不要太花里胡哨，而兼容性是我们给予关注的基础；

accent-color 相比于其它新属性，它有不错的兼容性；

那，到底，它是干嘛吃的？

说白了，就是标题中的一句话，它能修改 input 默认控件的颜色。

目前支持下面这些 input 控件元素：

复选框 <input type=”checkbox”>

https://code.juejin.cn/pen/7173593831802306612

单选框 <input type=”radio”>

https://code.juejin.cn/pen/7173594081396785159

范围选择框 <input type=”range”>

https://code.juejin.cn/pen/7173594391485874212

进度条 <progress>

https://code.juejin.cn/pen/7173593663652986894

在之前，当我们想要更改这些控件的颜色时，可能需要自定义控件，或者借助复杂的第三方库。现在，有了 accent-color ，可以直接设置颜色，让默认组件也不再单调。在黑暗模式下，也能适配。

除了以上这 4 种默认控件，你可能也想试试其它 input 控件的设置效果：

<input type="date">
<input type="number" min=0 max=10 value=0>
<input type="text" list="animals" placeholder="Animals">
<input type="search" list="animals" placeholder="Search...">

<details>
  <summary>Details</summary>
  <p>Peek-a-boo</p>
</details>

<ul>
  <li>This</li>
  <li>Is</li>
  <li>A</li>
  <li>List</li>
</ul>

<datalist id="animals">
  <option>Dog</option>
  <option>Cat</option>
  <option>Spider</option>
</datalist>

html {  
--brand: hotpink;  
scrollbar-color: hotpink Canvas;  
}  
  
:root { accent-color: var(--brand); }  
:focus-visible { outline-color: var(--brand); }  
::selection { background-color: var(--brand); }  
::marker { color: var(--brand); }  
  
:is(  
::-webkit-calendar-picker-indicator,  
::-webkit-clear-button,  
::-webkit-inner-spin-button,  
::-webkit-outer-spin-button  
) {  
color: var(--brand);  
}

在 chrome 浏览器下表现正常，但并不完全支持其它浏览器。

https://code.juejin.cn/pen/7173597023239667764

也许后续会有更多支持，比如 option ~~ 尽情期待~

OK，虽然这只是一个小小的 CSS 新属性，但我们知道，CSS 的应用就是重在积累。