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

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

accent-color

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

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

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

image.png

那,到底,它是干嘛吃的?

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

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

  • 复选框 <input type=”checkbox”>

  • 单选框 <input type=”radio”>

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

  • 进度条 <progress>

在之前,当我们想要更改这些控件的颜色时,可能需要自定义控件,或者借助复杂的第三方库。现在,有了 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 浏览器下表现正常,但并不完全支持其它浏览器。

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

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

image.png

阶段小结

本月编写或翻译了一系列关于 CSS 的小知识,很多也是自己一边在吸取学习,一边在向外输出。

image.png

本瓜意识到了:

CSS 能玩的花活是真滴多!

作为前端开发者,不能放弃 CSS 这有趣又有用的能力!

CSS 重在积累,即使是一个很小的、新的特性,也值得探究实践!


OK,以上便是本篇分享,希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

😹 加我微信 ATAR53,拉你入群,定期抽奖、粉丝福利多多。只学习交友、不推文卖课~

😸 我的公众号:掘金安东尼,在上面,不止编程,更多还有生活感悟~

😺 我的 GithubPage: tuaran.github.io,它已经被维护 4 年+ 啦~


本文正在参加「金石计划 . 瓜分6万现金大奖」

收藏成功!
已添加到「」, 点击更改