只需一行代码即可将您的品牌颜色应用到内置的 HTML 表单输入。
如今的 HTML 表单元素很难自定义。感觉就像是在只有少数自定义样式之间做出选择,或者需要重置输入样式并从头开始构建。从头开始构建该框架最终会比预期工作量大。这还可能会导致忘记元素状态的样式(不确定,我看着您),以及失去内置无障碍功能。因此,要完全重新创建浏览器提供的内容 可能会比您预想的要复杂得多
accent-color: hotpink;
CSS 界面规范中的 CSS accent-color
支持使用一行 CSS 为元素着色,提供一种将品牌融入元素的方法,让您无需进行自定义。
accent-color
属性还可与 color-scheme
配合使用,允许作者对浅色和深色元素进行色调调节。在以下示例中,用户已启用深色主题,页面使用 color-scheme: light dark
,并为深色主题热粉色调控件使用相同的 accent-color: hotpink
。
支持的元素
目前,只有四个元素可通过 accent-color
属性进行色调调节:checkbox、radio、range 和 progress。您可以在以下网址预览每种颜色的浅色和深色配色方案:https://accent-color.glitch.me。
复选框
电台
范围
进度
保证对比度
为防止现有元素无法访问,具有 accent-color
的浏览器需要确定可与自定义强调色一起使用的符合条件的对比度。以下屏幕截图展示了 Chrome 94(左侧)和 Firefox 92 夜间模式(右侧)的算法差异:
因此,最重要的是信任浏览器。提供品牌颜色,并相信它能为您做出明智的决定。
额外:更着色
您可能想知道如何为这四个表单元素以上的色调着色?以下是用于调色的最小沙盒:
- 对焦环
- 文本选择突出显示
- 列出标记
- 箭头指示符(仅限 Webkit)
- 滚动条滑块(仅限 Firefox 浏览器)
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);
}
未来的发展潜力
该规范并不将 accent-color
的应用限制为本文中所示的四个元素,以后可以添加更多支持。诸如 <select>
中选定 <option>
之类的元素可以使用 accent-color
突出显示。
您喜欢在网页上为哪些内容着色吗?您可以使用选择器向 @argyleink 发推文,它可能会被添加到本文中!