十年踪迹:巧用 currentColor 属性来实现自定义 checkbox 样式

在 CSS3 中，有一个常被忽视的颜色属性值，叫做 “currentColor”。

它可以作为属性值作用于元素的 color、background-color、border 等属性中，也可以作用于 SVG 和 Canvas。

currentColor 的语义是表示将颜色设为当前文字颜色，在有些特定的场景下，这个特殊的属性值能给我们带来很大的方便。

比如下面的这个例子。

我们知道，使用 CSS 是没办法直接定义 checkbox 元素的 color 和 background-color 属性的。因此，如果我们想要改写 checkbox 的样式，就需要用别的办法。

input[type=checkbox] {

background-color: red;

color: red;

border: solid red;

}

复制代码

上面的属性设置对 checkbox 的外观统统不起作用

对于 CSS 经验比较丰富的同学，很容易想到，一种比较优雅的方式是采用伪元素。

我们看一下我要实现的 checkbox 的效果：

我在一个列表项中实现 checkbox，让 checkbox 的颜色随着列表项的文字颜色改变，一共有三种不同颜色，奇数行默认的颜色是蓝色，偶数行默认的颜色是青色，鼠标 hover 上的列表项，颜色为红色。

checkbox 选中时，表现为中心一个白色的 x。

它的 HTML 结构如下：

第1项

第2项

第3项

第4项

第5项

第6项

复制代码

那么我们可以来定义一下样式：

首先是列表的样式

ul {

padding: 0;

}

li {

color: #008080;

list-style: none;

}

li:nth-child(2n + 1) {

color: #000080;

}

li:hover {

color: red;

}

复制代码

然后定义 checkbox 的样式：

input[type=checkbox] {

position: relative;

color: inherit;

}

input[type=checkbox]::before,

input[type=checkbox]::after {

position: absolute;

display: inline-block;

width: 12px;

height: 12px;

line-height: 12px;

border-radius: 3px;

text-align: center;

}

input[type=checkbox]:checked::after {

content: ‘x’;

color: white;

}

input[type=checkbox]::before {

content: ’ ';

background-color: currentColor;

}

复制代码

如上面代码，基本思路是，我们用 before 伪元素实现 checkbox 的背景，用 after 伪元素实现选中时白色的 “x”。

在这里，我们注意 currentColor 的用法：

input[type=checkbox]::before {

content: ’ ';

background-color: currentColor;

}

复制代码

我们将 checkbox 的 before 伪元素的 background-color 设置为 currentColor，表示将背景色设置为当前的文字颜色值。不过要注意，伪元素在 DOM 树中是渲染成对应元素的子元素，所以此时checkbox::before的 background-color 的值应该是 checkbox 的文字颜色，即 color 属性值。

但是，checkbox 默认的 color 值并不会继承它的父元素，也就是这里的 li，所以我们要先将 checkbox 的 color 值设置为继承父元素：

input[type=checkbox] {

position: relative;

color: inherit;

}

复制代码

👉🏻 知识点：将 CSS 属性值设置为inherit，能够让元素从父元素继承该属性值。

👉🏻 知识点：将 background-color 属性设置为 currentColor，能够让元素的 background-color 呈现为当前的文字颜色，即 color 属性值。

checkbox::before的 color 属性值默认继承 checkbox 的 color 属性值，所以这样我们就将它的background-color设置为文字的属性值了。

最后完整的例子在这里。

扩展

border-color属性的默认值是currentColor，因此，如果你要将一个元素的边框颜色设置为与文字颜色相同，可以缺省border-color属性值，例如：