accent-color
Nice looking radios and checkboxes with native css styling
With the new CSS property accent-color it is now finally possible to change the color
of a native HTML radio element. In the past web devs always had to resort to recreating their own
radios, even if they only wanted to change the color to something more in line
with the rest of the design.
The css for this is simple enough (I've also added CSS to change the size of the radio):
input[type='radio'] {
accent-color: #fd6400;
block-size: 1em;
inline-size: 1em;
}
The same also works for checkboxes.
input[type='checkbox'] {
accent-color: #fd6400;
block-size: 1em;
inline-size: 1em;
}
Browser support is getting pretty good (Edge, Chrome, Firefox) and with Safari support is just around the corner (currently in Technology Preview).
Feel free to play around with the Codepens I've created for this: