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 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!