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
The HTML has three elements: a
label, and a
describing the checkbox value. It’s important here that
label has a
for=id0 attribute that maps to the checkbox
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
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
My initial goal with this was to use one header on pages A, B, C and another header on X, Y, Z.