Cannot set background color for unchecked checkbox

Question

I am trying to set the background color of a non-checked checkbox to white and I cannot find a way to do it. It keeps the blue color also when it's checked and also when unchecked. I've tried with:

input[type=checkbox]:not(:checked) {
    background-color: white;
}

and also:

input[type=checkbox]:after { (this one I don't think it's even valid)
    background-color: white;
}

My code for the moment is:

input[type=checkbox] {
  position: relative;
  cursor: pointer;
}

input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  border: 1px solid #99AFC1;
  border-radius: 3px;
  background-color: #00AEEF;
  padding: 1px;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}

<div class="container">
  <input type="checkbox" name="test">
</div>

If someone has any ideas, I will appreciate it. Thank you

External

Possible duplicate of Checkbox CSS :checked styling – Hagler

Answer 1

Here is an example solution based on your code:

input[type=checkbox] {
  position: relative;
  cursor: pointer;
}

input[type=checkbox]:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  border: 1px solid #99AFC1;
  border-radius: 3px;
  padding: 1px;
  background-color: #FFFFFF;
}

input[type=checkbox]:checked:before {
  background-color: #00AEEF;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}

<div class="container">
    <input type="checkbox" name="test">
</div>

Rhodic

But note that appearance is still experimental. From MDN: "If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers." – Foresail

Thank you for the feedback! alternatively, OP could use white background for the unchecked ::before to cover the default checkbox look, maybe I will update the answer with this approach – Rhodic

Answer 2

Created a solution after lots of tinkering. Can even be used for more complex usecases.

All you need to do is utilize a css property appearance which makes the checkbox blank and reset all styles. Later on just revert it using revert as it's value (Lots of dev doesn't know existence of this property and similar questions don't have a working quality solution till now. Also as per MDN docks revert is supported in chrome 84 since July 2020 and many other browsers too.You can play with appearance values and supply other properties too as per your usecase)

Here accent-color property is used to change the background while ticked/checked.

.checkBoxContainer > input[type="checkbox"] {
          appearance: none;
          background-color: gray;
 }
    
.checkBoxContainer > input[type="checkbox"]:checked {
      appearance: revert;
      accent-color: rgb(0, 0, 0);
}

My Usecase - Gray background checkbox & black background while checked.

Insipid

Thanks, I asked the question 4 years ago :D I'm surprised you commented it – External

Answer 3

Add following style to your css:

input[type=checkbox]:checked::before {
  background-color: #00AEEF;
}

JsFiddle LINK

Hope this helps.

Everyway

Thank you very much for your response, yes, your solution is also working :D – External

It won't work for me. What could I be doing wrong? – Liter

@ChidiebereEzeokwelume, can you please share your CSS? – Everyway