How to change html using pure CSS? radio/checkbox default background color style

The content of this article is about how to use pure CSS to change html? The default background color style of radio/checkbox has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS code:

input[type=checkbox] {
  margin-right: 5px;
  cursor: pointer;
  font-size: 14px;
  width: 15px;
  height: 12px;
  position: relative;
}
input[type=checkbox]:after {
  position: absolute;
  width: 10px;
  height: 15px;
  top: 0;
  content: " ";
  background-color: #ff0000;
  color: #fff;
  display: inline-block;
  visibility: visible;
  padding: 0px 3px;
  border-radius: 3px;
}
input[type=checkbox]:checked:after {
  content: "✓";
  font-size: 12px;
}
input[type=radio] {
    margin-right: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 15px;
    height: 12px;
    position: relative;
}
input[type=radio]:after {
    position: absolute;
    width: 10px;
    height: 15px;
    top: 0;
    content: " ";
    background-color: #ff0000;
    color: #fff;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 50%;
}
input[type=radio]:checked:before {
    content: "✓";
    display: block;
    position: relative;
    top: -2px;
    left: 3px;
    width: 6px;
    height: 6px;
    color: #fff;
    font-weight: 400;
    z-index: 1;
}

HTML Example:

<input type="checkbox" name="method" value="plus" checked>plus<br>
<input type="checkbox" name="method" value="minus">minus<br>
<input type="radio" name="method" value="plus">plus<br>
<input type="radio" name="method" value="minus" checked>minus<br>

The above is an introduction to how to use pure CSS to change html? A full introduction to the default background color style of radio/checkbox. If you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to change html using pure CSS? radio/checkbox default background color style. For more information, please follow other related articles on the PHP Chinese website!