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

change background colour type one line css only

<input type="checkbox" >

CodePudding user response：

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" >

CodePudding user response：

I doubt this could work, some sort of JavaScript would be needed for this to work.