css : 用accent-color给火柴棒上色

马黑黑

所谓“火柴棒”，不是真的指现实中的火柴棒，而是因为HTML的form控件中，input type="range" 的样式很像个火柴棒。试看：

range 在不同内核的浏览器环境下，样式会有所不同，但是颜色肯定都不好看。正如之前我们曾经介绍过的给其它HTML控件做化妆一样，我们可以通过手术让它脱胎换骨，可是手术费实在不低。其实呢，css3有一个属性，accent-color，允许用来设置少量HTML元素的强调颜色。accent 这个单词有“口音”、“重音”、“强调”等意思，css3里的 accent 取“强调”之意，accent-color 指的就是强调颜色。看代码：

1. .mama input[type="range"] {
2.     accent-color: green;
3. }

这将使得 class="mama" 的元素里的所有 range 滑杆呈现出绿色。

除了 range，input 中的 radio（单选按钮）、checkBox（复选按钮）等也支持 accent-color 属性。下面就是它们哥仨设置强调颜色为绿色的样纸：

0

选我 选他

选我 选他

樵歌

肯定有大用

马黑黑

樵歌 发表于 2024-1-25 19:49
肯定有大用

就是给点颜色看看

红影

手术后，真的能显示设定的绿色呢

马黑黑

红影 发表于 2024-1-25 20:13
手术后，真的能显示设定的绿色呢

这个没有动手术，只是涂点药水

樵歌

马黑黑 发表于 2024-1-25 19:56
就是给点颜色看看

给点颜色别吓跑了

马黑黑

樵歌 发表于 2024-1-25 20:44
给点颜色别吓跑了

红影

马黑黑 发表于 2024-1-25 20:25
这个没有动手术，只是涂点药水

好玩，涂了的事好看了呢。

马黑黑

红影 发表于 2024-1-25 23:20
好玩，涂了的事好看了呢。

你看就是一个CSS属性设置

红影

马黑黑 发表于 2024-1-25 23:49
你看就是一个CSS属性设置

好多css属性之前不知道的啊

马黑黑

红影 发表于 2024-1-26 10:36
好多css属性之前不知道的啊

CSS属性总量不多，我有事没事就去翻翻 https://www.w3cschool.cn/html/dict 这个网站，久而久之就了解的差不多了

红影

马黑黑 发表于 2024-1-26 12:48
CSS属性总量不多，我有事没事就去翻翻 https://www.w3cschool.cn/html/dict 这个网站，久而久之就了解的 ...

打开看了看，这个特别好。谢谢黑黑

马黑黑

红影 发表于 2024-1-26 15:35
打开看了看，这个特别好。谢谢黑黑

这是官网

红影

马黑黑 发表于 2024-1-26 19:12
这是官网

饿呢，去这里学习，收获一定很大。

马黑黑

红影 发表于 2024-1-26 20:16
饿呢，去这里学习，收获一定很大。

主要是查询。当然，他也提供可供学习的资料。

红影

马黑黑 发表于 2024-1-26 21:43
主要是查询。当然，他也提供可供学习的资料。

我已经收起来了，空了好好去看看

马黑黑

红影 发表于 2024-1-26 23:33
我已经收起来了，空了好好去看看

把它当一本资料，有空翻翻

红影

马黑黑 发表于 2024-1-27 12:18
把它当一本资料，有空翻翻

嗯嗯，这个必须的

马黑黑

红影 发表于 2024-1-27 15:29
嗯嗯，这个必须的

红影

马黑黑 发表于 2024-1-27 17:42

这个帖子里需要记住accent-color，这个是关键点。