css can't change checkbox background color

Question

I'm learning css and html, I'm validating a registration form, I have the user terms checkbox but I can't change the background color:

This is the html code where I create the checkbox and the label:

<div class="checkbox-wrap checkbox-primary" id="checkboxdiv" name="checkboxdiv">
     <input class="checkbox" type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
     <label class="checkbox-wrap checkbox-primary" for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <a href="#!" class="text-white"><u>Terms and Conditions</u></a> of your site.
     </label>
</div>

I tried some solutions like:

input[type="checkbox"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0; 
  accent-color: #9d3039;
}

And:

input[type=checkbox] {
  transform: scale(1.5);
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after,
input[type=checkbox]::after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after,
input[type=checkbox]:checked::after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

I tried also to create a custom class and in the style.css set the accent there but nothing.

Possible duplicate: [How to change checkbox background color in simple HTML](https://stackoverflow.com/questions/69958117/how-to-change-checkbox-background-color-in-simple-html) — Alexander Nied, Apr 18 '22 at 15:50
that question has been answered with an old solution, in the comment they posted the new solution that is color-accent but as I said it doesn't work for me... — C-Gian, Apr 18 '22 at 15:54
you want to change the background color when a user ticks on that checkbox, right? Which color value you want to change? @C-Gian — Nick Vu, Apr 18 '22 at 15:56
I'd like to change the default color too, my form has a blue dark background, so I need it with a light blue color as default and then when clicked still light blue but with a white checkmark on it @NickVu — C-Gian, Apr 18 '22 at 15:58
@C-Gian [`accent-color` works perfectly fine on your code as you can see in this CodePen](https://codepen.io/awnied/pen/xxpmYNw). The issue is that the behavior you want is not covered by [`accent-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color). The linked possible duplicate is only six months old as of my writing this comment, and provides the solution you state you are seeking-- to change the background of the checkbox at all times, not merely for the `checked` state. Am I incorrect in these assertions? How does this solution not answer your question? — Alexander Nied, Apr 18 '22 at 16:21
Another possible duplicate with 2022 updates: [How to style a checkbox using CSS](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) — Alexander Nied, Apr 18 '22 at 16:25

score 0 · Answer 1 · edited Apr 18 '22 at 16:22

When you simply make a global definition like the one below, this color should change,

:root {
  accent-color: red;
}

In your case, this change stays in the background since you have given the checkbox element visible hidden.

input[type=checkbox]:checked:after,
input[type=checkbox]:checked::after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
  background-color: red;
}

so in the checked state you can change the background color directly to get the same look.

demo https://jsfiddle.net/rjzw10cv/1/

score 0 · Answer 2 · edited Apr 18 '22 at 16:24

ahh I remember having this issue. Here it is. Just change the background color and color to anything you'd like and you should be set. This can be done with any input type.

input[type="checkbox"]:checked+label:before {
    background: #3d404e;
    color: #F00;
    content: "\2713";
    text-align: center;
}

so your html code would be

<div class="checkbox-wrap checkbox-primary" id="checkboxdiv" name="checkboxdiv">
  <input class="checkbox" type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
  <label class="checkbox-wrap checkbox-primary" for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <a href="#!" class="text-white"><u>Terms and Conditions</u></a> of your site.
       </label>
</div>

and your full css would be below, I added a margin-right:20px as to hide the large space behind the custom checkbox elements.

p {
  margin: 5px 0;
  padding: 0;
}

input[type="checkbox"] {
  margin-right: -20px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

label {
  cursor: pointer;
}


/* EDIT THE BACKGROUND VALUE FOR CUSTOM CHECKBOX bg COLOR FOR NOT CHECKED */

input[type="checkbox"]+label:before {
  border: 1px solid #7f83a2;
  content: "\00a0";
  display: inline-block;
  background: #000;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}


/* EDIT THE BACKGROUND VALUE FOR CUSTOM CHECKBOX bg COLOR FOR CHECKED, CHANGE COLOR TO CHANGE CHECK MARK COLOR */

input[type="checkbox"]:checked+label:before {
  background: #3d404e;
  color: #ff0000;
  content: "\2713";
  text-align: center;
}

input[type="checkbox"]:checked+label:after {
  font-weight: bold;
}

Here is a snippet:

p {
  margin: 5px 0;
  padding: 0;
}

input[type="checkbox"] {
  margin-right: -20px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

label {
  cursor: pointer;
}


/* EDIT THE BACKGROUND VALUE FOR CUSTOM CHECKBOX bg COLOR FOR NOT CHECKED */

input[type="checkbox"]+label:before {
  border: 1px solid #7f83a2;
  content: "\00a0";
  display: inline-block;
  background: #000;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}


/* EDIT THE BACKGROUND VALUE FOR CUSTOM CHECKBOX bg COLOR FOR CHECKED, CHANGE COLOR TO CHANGE CHECK MARK COLOR */

input[type="checkbox"]:checked+label:before {
  background: #3d404e;
  color: #ff0000;
  content: "\2713";
  text-align: center;
}

input[type="checkbox"]:checked+label:after {
  font-weight: bold;
}

<div class="checkbox-wrap checkbox-primary" id="checkboxdiv" name="checkboxdiv">
  <input class="checkbox" type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
  <label class="checkbox-wrap checkbox-primary" for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <a href="#!" class="text-white"><u>Terms and Conditions</u></a> of your site.
       </label>
</div>

css can't change checkbox background color

2 Answers2