0

How can I change input field's background color from default white to grey? I tried:

input[type=checkbox]:checked::before {
  background-color: grey;
}
<div class="container">
  <input id="ch" type="checkbox" />
</div>

And:

#ch {
  accent-color: #68e199;
  background-color: gray;
}
<div class="container">
  <input id="ch" type="checkbox" />
</div>

but it's still white: enter image description here, I want this: enter image description here

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Skar
  • 333
  • 2
  • 11
  • Sorry to say this but checkbox theming isn't supported in most browsers yet. a custom checkbox element is the only way for that. you can also use the `accent-color` css property to change the color of it's active state – K i Aug 29 '23 at 11:46
  • HTML default radio and checkboxes are Operating System provided widgets you cannot modify unless the browser adds support for that (like `accent-color`). You will have to create a *CSS custom checkbox* for that, usually done by assigning `::before` and `::after` rules. Sucks for just a BG color, I know.. – Rene van der Lende Aug 29 '23 at 11:46

0 Answers0