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

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>

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 2e1cf0710519d5598b1f0f14c36ba6748c1ecd4bb896b2264e0711597d40766c 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>

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

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!