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