马黑黑 发表于 2024-1-25 09:58

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

本帖最后由 马黑黑 于 2024-1-25 10:00 编辑 <br /><br /><p>所谓“火柴棒”，不是真的指现实中的火柴棒，而是因为HTML的form控件中，input&nbsp;type="range"&nbsp;的样式很像个火柴棒。试看：</p>
<p><br></p>
<p><input type="range" min="0" max="100" value="0"></p>
<p><br>range&nbsp;在不同内核的浏览器环境下，样式会有所不同，但是颜色肯定都不好看。正如之前我们曾经介绍过的给其它HTML控件做化妆一样，我们可以通过手术让它脱胎换骨，可是手术费实在不低。其实呢，css3有一个属性，accent-color，允许用来设置少量HTML元素的强调颜色。accent&nbsp;这个单词有“口音”、“重音”、“强调”等意思，css3里的 accent&nbsp;取“强调”之意，accent-color&nbsp;指的就是强调颜色。看代码：</p><p><br></p><p></p><ol><li>.mama input {</li><li>&nbsp; &nbsp; accent-color: <font color="#008000">green</font>;</li><li>}</li></ol><p></p><p><br></p><p>这将使得&nbsp;class="mama"&nbsp;的元素里的所有&nbsp;range&nbsp;滑杆呈现出绿色。</p><p><br></p><p>除了&nbsp;range，input&nbsp;中的&nbsp;radio（单选按钮）、checkBox（复选按钮）等也支持&nbsp;accent-color&nbsp;属性。下面就是它们哥仨设置强调颜色为绿色的样纸：</p><p><br></p>
<style>
.mum {
        margin: 20px auto 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
}
.mum input {
        accent-color: green;
}
</style>

<div class="mum">
        <p>
                <input type="range" min="1" max="100" value="0" oninput="iMsg.value=this.value">
                <output id="iMsg">0</output>
        </p>
        <p>
                <input id="rd1" type="radio" name="rd" checked="">
                <label for="rd1">选我</label>
                <input id="rd2" type="radio" name="rd">
                <label for="rd2">选他</label>
        </p>
        <p><input type="checkbox" checked="">选我 <input type="checkbox">选他</p>
</div>

樵歌 发表于 2024-1-25 19:49

肯定有大用{:4_203:}

马黑黑 发表于 2024-1-25 19:56

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

就是给点颜色看看

红影 发表于 2024-1-25 20:13

手术后，真的能显示设定的绿色呢{:4_187:}

马黑黑 发表于 2024-1-25 20:25

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

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

樵歌 发表于 2024-1-25 20:44

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

给点颜色别吓跑了{:4_189:}

马黑黑 发表于 2024-1-25 20:48

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

{:4_172:}

红影 发表于 2024-1-25 23:20

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

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

马黑黑 发表于 2024-1-25 23:49

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

你看就是一个CSS属性设置

红影 发表于 2024-1-26 10:36

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

好多css属性之前不知道的啊{:4_173:}

马黑黑 发表于 2024-1-26 12:48

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

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

红影 发表于 2024-1-26 15:35

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

打开看了看，这个特别好。谢谢黑黑{:4_187:}

马黑黑 发表于 2024-1-26 19:12

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

这是官网

红影 发表于 2024-1-26 20:16

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

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

马黑黑 发表于 2024-1-26 21:43

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

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

红影 发表于 2024-1-26 23:33

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

我已经收起来了，空了好好去看看{:4_187:}

马黑黑 发表于 2024-1-27 12:18

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

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

红影 发表于 2024-1-27 15:29

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

嗯嗯，这个必须的{:4_187:}

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

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

{:4_190:}

红影 发表于 2024-1-27 22:01

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


这个帖子里需要记住accent-color，这个是关键点。
页: [1] 2 3 4 5
查看完整版本: css : 用accent-color给火柴棒上色