vendredi 21 juillet 2023

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

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




Aucun commentaire:

Enregistrer un commentaire