How to change html using pure CSS? radio/checkbox default background color style-CSS Tutorial-php.cn

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

云罗郡主

Release： 2018-10-11 14:40:05

forward

5241 people have browsed it

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.

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

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;
}

Copy after login

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>

Copy after login

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!