审查元素,你发现 Checkbox 是原生 HTML 标签写的,这个时候你挠挠头,想了想 CSS 好像没有更改强调色的属性,没办法,只能自己来自定义了,但是重新自己写问题很大,从头开始构建它最终会比预期的工作多得多,即使用第三方框架也不是最理想的解决方案,浏览器万一更新新增效果就扯犊子了。
最好的解决方案还是利用 CSS 属性来解决。这就是我们的主角:
接下来给出实现的源码:
问题来了,这么好用的 CSS 属性,难道就只支持复选框吗?那肯定不成本着好东西多用,它支持四个元素: checkbox 、 radio 、 range 和 progress 。每个都可以在此处以浅色和深色配色方案预览 https://accent-color.glitch.me 。
通过 https://caniuse.com/?search=accent-color 查询 accent-color 的兼容性很一般,但是你要知道,即使是不支持的浏览器,你写了 CSS 语法是不会报错的,所以作为增强使用完全没问题。
<html><head>
<meta charset="utf-8">
</head>
<body>
<P style="color:#ea68a2">在css中深粉色的代码是什么</P>
</body>
</html>
以上代码效果:
#后面加上PS取深红色的颜色值
pink就是粉红色咯,比如下面的div底色就是pink:
<div style="width:100px height:100px background-color:pink"></div>
用颜色值来表示就是:
<div style="width:100px height:100px background-color:#FFC0CB"></div>
用RGB值来表示就是:
<div style="width:100px height:100px background-color:rgb(255,192,203)"></div>