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 控件的设置效果：
代码语言：javascript复制<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 的应用就是重在积累。
阶段小结
本月编写或翻译了一系列关于 CSS 的小知识，很多也是自己一边在吸取学习，一边在向外输出。
本瓜意识到了：
CSS 能玩的花活是真滴多！
作为前端开发者，不能放弃 CSS 这有趣又有用的能力！
CSS 重在积累，即使是一个很小的、新的特性，也值得探究实践！
OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论
