liveBook · Manning

currentColor

As explained in Tiny CSS Projects

currentcolor is a CSS keyword value that resolves to the element's computed color property value.

currentColor is a CSS keyword that lets a property use the element’s computed font color when direct inheritance is otherwise unavailable. It is especially useful when styling controls whose borders should follow nearby text. section 10.3.3

Matching a form-control border to its text

Set the border color to currentcolor: `border: 1px solid currentcolor;`. A checkbox or radio button can then use the same color as its label text while its size scales with the label’s font size. section 10.3.3

Listing 10.9 Styled radio and checkbox inputs
input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  background-color: var(--background);
  margin: 0;
  width: 1.75em;
  height: 1.75em;
  border: 1px solid currentcolor;      #1
  display: inline-grid;                #2
  place-content: center;               #2
}
 
input[type="radio"] { border-radius: 50% }
 
input[type="checkbox"] { border-radius: 4px }

See currentcolor applied in the complete radio-button and checkbox styles, alongside em-based sizing, inline-grid layout, and shape-specific border radii. section 10.3.3

How Tiny CSS Projects covers it

How deep it goes
Explains the keyword through a border declaration and stops short of broader color-inheritance mechanics.
Examples
Demonstrates currentColor on customized radio buttons and checkboxes using a one-pixel border.
What it assumes
Assumes basic CSS declarations and font color, while explaining how a border can use that color indirectly.
What you can do after
Apply currentColor in CSS to keep borders visually aligned with an element’s text color.
How it connects
Connects currentColor with color inheritance, form controls, em units, and CSS borders.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.