How/can you style the background color of an un-checked checkbox/ (radio?) button with CSS?

Question

With the accent-color https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color (in all browsers except IE) we can change the color of the fill of the checkbox element when checked, however it isn't obvious if it is possible to style the background color when un-checked.

The default 'white' color is fine in most cases, but in trying to support a dark mode theme, without the OS being set to dark mode... setting this background color seem elusive.

Have tried various versions of setting the background-color, with transparent, !important etc. with no luck. Is there a magic setting/trick for this (without resorting to custom elements instead of the default HTML checkbox/radio)?

*{
  font-family:sans-serif;
}
label{
  cursor:pointer;
  user-select:none;
}
input[type="checkbox"]{
  accent-color:purple;
}
input[type="raido"]{
  accent-color:red;
}

<label><input type="checkbox"/> Unchecked</label><br/>
<label><input type="checkbox" checked="checked"/> Checked</label><br/>
<label><input type="checkbox" disabled="disabled"/> Disabled</label><br/>

<hr/>

<label><input type="radio" name="related"/> Unchecked A</label><br/>
<label><input type="radio" name="related"/> Unchecked B</label><br/>
<label><input type="radio" name="related"/> Unchecked C</label><br/>
<label><input type="radio" name="related" checked="checked"/> Checked D</label><br/>
<label><input type="radio" name="related" disabled="disabled"/> Disabled</label><br/>

accent-color on caniuse.com: https://caniuse.com/mdn-css_properties_accent-color

Professor

Does this answer your question? How to style a checkbox using CSS – Magnificent

Answer 1

You need to set the appearance property to none and restyle the checkbox/radio button yourself. A bit of a hack, but the only way that I'm aware of doing this at this point in time. Fortunately, it turns out to be pretty much the same styling with very simple CSS (see snippet below).

Since you're only applying these styles when it is NOT checked, you can still keep your accent-color styles for when the box is checked and you should get the results that you want.

input[type="checkbox"],
input[type="radio"] {
  accent-color: purple;
}

input[type="checkbox"]:not(:checked):not(:disabled),
input[type="radio"]:not(:checked):not(:disabled) {
  appearance: none;
  margin-bottom: 0;
  width: 1em;
  height: 1em;
  background: purple;
}

input[type="checkbox"]:not(:checked):not(:disabled) {
  border-radius: 2px;
}

input[type="radio"]:not(:checked):not(:disabled) {
  border-radius: 100px;
}

* {
  font-family:sans-serif;
}

label {
  cursor:pointer;
  user-select:none;
}

<label><input type="checkbox" /> Unchecked</label><br/>
<label><input type="checkbox" checked /> Checked</label><br/>
<label><input type="checkbox" disabled="disabled"/> Disabled</label><br/>

<hr/>

<label><input type="radio" name="related"/> Unchecked A</label><br/>
<label><input type="radio" name="related"/> Unchecked B</label><br/>
<label><input type="radio" name="related"/> Unchecked C</label><br/>
<label><input type="radio" name="related" checked="checked"/> Checked D</label><br/>
<label><input type="radio" name="related" disabled="disabled"/> Disabled</label>

Pilsudski

upvoted ;-) I'm just digging in a bit deeper to see if I can maintain the natural size of the checkbox/radio (especially in Firefox) as it seems to fluctuate when the state changes from checked to unchecked. – Professor