In CSS3, there is an oft-overlooked value for the color property called “currentColor.”

It can be used as an attribute value for elements such as color, background-color, border, etc. It can also be used for SVG and Canvas.

The semantics of currentColor are to set the color to the current text color, and this particular attribute value can be very handy in certain scenarios.

Take this example.

We know that there is no way to define the color and background-color attributes of a checkbox element directly using CSS. Therefore, if we want to rewrite the checkbox style, we need to do something else.

input[type=checkbox] {
  background-color: red;
  color: red;
  border: solid red;
}

Copy the code

None of the above properties have any effect on the appearance of the checkbox

For those of you who are experienced in CSS, it’s easy to imagine that a more elegant approach would be to use pseudo-elements.

Let’s look at the checkbox effect I want to implement:

Checkbox = checkbox (); checkbox = checkbox (); checkbox = checkbox ();

Checkbox, when checked, appears as a white X in the center.

Its HTML structure is as follows:

<ul> <li><input type="checkbox"> item 1 </li> <li><input type="checkbox"> Item 2 </li> <li><input type="checkbox"> Item 3 </li> <li><input type="checkbox"> item 4 </li> <li><input type="checkbox"> Item 5 </li> <li><input type="checkbox"> Item 6 </li> </ul>Copy the code

So we can define the style:

The first is the style of the list

ul {
  padding: 0;
}

li {
  color: #008080;
  list-style: none;
}

li:nth-child(2n + 1) {
  color: #000080;
}

li:hover {
  color: red;
}

Copy the code

Then define the checkbox style:

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;
}

Copy the code

As in the above code, the basic idea is that we use the before pseudo-element to implement the checkbox background, and use the after pseudo-element to implement the white “x” when checked.

Here, we note the use of currentColor:

input[type=checkbox]::before {
  content: ' ';
  background-color: currentColor;
}

Copy the code

We set the background-color of the before pseudo-element of the checkbox to currentColor, indicating that the background color is set to the current text color value. Checkbox ::before background-color is the color of the checkbox text.

Li = li; li = li; li = li; li = Li; li

input[type=checkbox] {
  position: relative;
  color: inherit;
}

Copy the code

👉🏻 Knowledge: If you set the CSS property value to inherit, you can inherit the property value from the parent element.

👉🏻 Set background-color to currentColor to render element background-color as the current text color.

The color attribute of checkbox::before inherits the color attribute of checkbox by default, so we set its background-color to the text attribute.

The last complete example is here.

extension

The default value of the border-color attribute is currentColor, so if you want to set the border color of an element to be the same as the text color, you can default the border-color attribute value, for example:

div {
  color: red;
  border: solid 1px;
}

Copy the code

The equivalent of

div {
  color: red;
  border: solid 1px currentColor;
}

Copy the code

CurrentColor works equally well for the fill and stroke attributes of SVG elements, so we can use it to simply change the SVG icon as the text color changes.

Such as:

The online demo

< a href = "# # #" > < SVG version = "1.1" XMLNS = "http://www.w3.org/2000/svg" XMLNS: xlink = "http://www.w3.org/1999/xlink" x = 0 px "" y="0px" viewBox="0 0 22 22" xml:space="preserve"> <g> <path D = "M9.7, L9.7 14.4, 14.4-0.2 c, 0-0.4-0.1-0.5-0.2 l - 2.7-2.7 - c - 0.3-0.3-0.3-0.8, s0.8 0-1.1-0.3, 1.1, 0 l2. 1,2.1 c0.3 l4.8-4.8-0.3, 0.8 and 0 . The 3,1.1, 0 s0. 3,0.8, 0,1.1 l - 5.3, C10.1 5.3, 14.3, 9.9, 14.4, 9.7, 14.4 z "> < / path > > < / g < / SVG > < span > work < / span > < / a >Copy the code
a {
  text-decoration: none;
}

a:link,
a:visited {
  color: #37c;
}

a:hover,
a:active {
  border-bottom: dashed;
  color: red;
}

.item svg {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  fill: currentColor;
}

Copy the code

So much for the currentColor property, what else does it do in your work? Welcome to comment on issue ~