Checkbox Checkbox style modification

Configure the appearance attribute to clear the existing style, reconfigure it, add the background image from the Checked and After pseudo classes, and set the background image to the right configuration.

The original style:

After the change, click on the style before:

After the change, click on the after style:

The CSS code:

 input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid # 999999;
  border-radius: 50%;
}

 input[type="checkbox"]:focus.input[type="checkbox"]:hover {
  outline: none;
}
 input[type="checkbox"]:checked::after{
  content:"";
  display: inline-block;
  width:18px;
  height:18px;
  background-image: url(./true.png);
  background-repeat: no-repeat;
  background-size: 16px 16px; 
}
Copy the code