Hello again!

Been quiet here at TIL headquarters. Combination of deadlines and maybe a little of burnout contributed to that. But back at it thanks to some gentle prodding by my TIL brother-in-arms, Chuck Grimmett.

Custom HTML checkboxes via CSS

See the Pen PNmrJv by Eric Davis (@edavis215) on CodePen.

The HTML has three elements: a input[type=checkbox], a label, and a span describing the checkbox value. It’s important here that label has a for=id0 attribute that maps to the checkbox id=id0 attribute. Doesn’t have to be id0, of course, just has to map.

The CSS has three parts. First, the checkbox is hidden completely. Second, the label is transformed into the “new checkbox” by setting width, height, and a display property. Finally, the label is given a certain set of properties when the checkbox is unchecked and another set of properties when it is checked.

The checkbox receives the :checked psuedo-selector because we’re now clicking on the label itself which has the connection to the input[type=checkbox] field via the for=id0 attribute.

Set an image source via CSS

This falls on the “hacky” side of the ledger – content should only be used with psuedo-selectors, no Firefox support – but I think it’s pretty cool:

.selector img {
  content: url(/path/to/image.png);
}

My initial goal with this was to use one header on pages A, B, C and another header on X, Y, Z.

But the lack of Firefox support led me to drop this approach and go with a Javascript solution.