CSS accent-color

html-css011

CSS accent-color,第1张

一般我们的复选框长成下面这样,现在要求你切深色模式的时候,更改复选框选中的强调色为粉色。

审查元素,你发现 Checkbox 是原生 HTML 标签写的,这个时候你挠挠头,想了想 CSS 好像没有更改强调色的属性,没办法,只能自己来自定义了,但是重新自己写问题很大,从头开始构建它最终会比预期的工作多得多,即使用第三方框架也不是最理想的解决方案,浏览器万一更新新增效果就扯犊子了。

最好的解决方案还是利用 CSS 属性来解决。这就是我们的主角:

接下来给出实现的源码:

问题来了,这么好用的 CSS 属性,难道就只支持复选框吗?那肯定不成本着好东西多用,它支持四个元素: checkbox 、 radio 、 range 和 progress 。每个都可以在此处以浅色和深色配色方案预览 https://accent-color.glitch.me 。

通过 https://caniuse.com/?search=accent-color 查询 accent-color 的兼容性很一般,但是你要知道,即使是不支持的浏览器,你写了 CSS 语法是不会报错的,所以作为增强使用完全没问题。

<body bgcolor="#99CC66" text="#663333" link="#FFFF00" vlink="#FF6666" alink="#996666">是html写法

其中bgcolor是背景颜色 text是文颜色 lick是未访问的超链接 vlink是访问后的超链接

alink是激活的超链接

<style type="text/css">

<!--

......

-->

</style></head>是CSS[层叠样式表]写法

DW2004以上版本支持自动将对象格式生成CSS

其实从"配色方案""页面属性"两种操作的目的来说,是相同的,区别仅仅是写法不同

但个人觉得,使用"页面属性"的时候多于"配色方案"

还有,最佳的定义方式应该将CSS做为一个文件,多个网页都可以调用这些CSS样式