0

A problem: I'd like to use a custom background color; unchecked checkboxes are "white" in this case. Here's the shortest illustration:

div {
  background: yellow;
}
<div>
  <input type="checkbox" />
</div>

A screenshot, just in case:

enter image description here

Now, I know that a basic approach would be to create a custom checkbox pseudoelement, but I still wonder if there's a "low-code" solution.

I also know that one can use accent-color to style the "checked" state and color-scheme: dark; for dark mode (see more detail here, for instance: they even say that browser ensures accessibility when using accent-color by ensuring sufficient color contrast).

So, is there a way to set the background color of an unchecked checkbox without rebuilding it with a pseudoelement? (At least to inherit the main background color.) Looks like there's no way to create a custom color-scheme (yet), but may be I've overlooked some other way?

YakovL
  • 7,557
  • 12
  • 62
  • 102
  • 3
    _"So, is there a way to set the background color of an unchecked checkbox without rebuilding it with a pseudoelement?"_ in short, **no**, because HTML input elements were historically (and generally still are today) ["_replaced elements_"](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), specifically OS-native widgets (though nowadays, most browsers bring their own widgets) which were completely opaque to JS+DOM and CSS. Other than the (very recently added) `accent-color` property (and assuming your visitors' browsers all support it) there's not much else you can do. – Dai Apr 16 '23 at 07:49

0 Answers0