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 — Alexander Nied
– Alexander Nied, Commented Apr 18, 2022 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
– C-Gian, Commented Apr 18, 2022 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
– Nick Vu, Commented Apr 18, 2022 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
– C-Gian, Commented Apr 18, 2022 at 15:58
@C-Gian accent-color works perfectly fine on your code as you can see in this CodePen. The issue is that the behavior you want is not covered by 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
– Alexander Nied, Commented Apr 18, 2022 at 16:21

Alexander Nied · Accepted Answer · 2022-04-18 16:22:17Z

0

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/

edited Apr 18, 2022 at 16:22

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

answered Apr 18, 2022 at 15:56

errorau

2,3312 gold badges20 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luckytechy Over a year ago

do you have any idea why, when i change the accent-color, the color of the checkmark inside the checkbox also changes from white to black? how can i prevent this.

Alexander Nied · Accepted Answer · 2022-04-18 16:24:25Z

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>

Collectives™ on Stack Overflow

css can't change checkbox background color

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related