Detailed explanation of examples of using CSS to customize radio and checkbox styles-CSS Tutorial-php.cn

Detailed explanation of examples of using CSS to customize radio and checkbox styles

黄舟

Release： 2017-05-26 13:21:53

Original

2356 people have browsed it

When I used to make custom-style radio and checkboxes, the structure was always as follows

<label>
    <span class="diyRadio">
        <input type="radio" name=" value="">
    </span>
    <span>文字</span>
</label>

Copy after login

Then define the style of diyRadio as a new Radio, and then use js to make the association.

Only today did I know that you can use the for attribute + :checked of the label to do it with pure CSS
( It’s really inappropriate. You still have to learn things seriously. , Be more detailed. )

DIY single option example is as follows:

<!-- HTML -->
<p class="radio-beauty-container">
    <label>
        <span class="radio-name">radio1</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">radio2</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">radio3</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</p>

Copy after login

/* CSS */
.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}

Copy after login

The above is the detailed content of Detailed explanation of examples of using CSS to customize radio and checkbox styles. For more information, please follow other related articles on the PHP Chinese website!