If i wil change background colour of input type check box is checked use CSS only? it is possible or not?

Issue

change background colour type one line css only

<input type="checkbox" class="HP">

Solution

The only way you can do it is to assign a unicode content in it and hide the original one by doing something like below.

input {
  height: 20px;
  width: 20px;
  }
  
  
  input[type=checkbox]:checked:after {
  content: "\2714";  
  height: 20px;
  width:20px;
  color: white;
  text-align: center;
}


input[type=checkbox]:after {
  content: " ";
  background-color: red;
  display: inline-block;
  visibility: visible;
  color: white;
}


input:autofill {
  background: red;
}

input, input:-moz-autofill, input:-moz-autofill-preview {
  filter: none;
}
<input type="checkbox" class="HP">

Answered By – Crystal

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.