css can't change checkbox background color-CodePudding

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  id="checkboxdiv" name="checkboxdiv">
     <input  type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
     <label  for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <a href="#!" ><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.

CodePudding user response：

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/

CodePudding user response：

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  id="checkboxdiv" name="checkboxdiv">
  <input  type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
  <label  for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <a href="#!" ><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  id="checkboxdiv" name="checkboxdiv">
  <input  type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
  <label  for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <a href="#!" ><u>Terms and Conditions</u></a> of your site.
       </label>
</div>