How to use pure CSS3 to beautify the radio button sample code sharing

This pure CSS3 method of beautifying the radio button radio is suitable for the following situations:

1. It is compatible with IE9 and above. If you need to be compatible with IE8, you need to write an IE hack. Remove the style

2. Only the radio button radio is supported, because the circle in the radio button selection style can be made with CSS, but the check button checkbox selection effect requires an image or icon font library

3. No need for JS to support switching effects

The picture below is the final rendering:

HTML code:

<label for="man" class="radio">
    <span class="radio-bg"></span>
    <input type="radio" name="sex" id="man" value="男" checked="checked" /> 男
    <span class="radio-on"></span>
</label>
<label for="woman" class="radio">
    <span class="radio-bg"></span>
    <input type="radio" name="sex" id="woman" value="女" /> 女
    <span class="radio-on"></span>
</label>

CSS code:

.radio{
    display: inline-block;
    position: relative;
    line-height: 18px;
    margin-right: 10px;
    cursor: pointer;
}
.radio input{
    display: none;
}
.radio .radio-bg{
    display: inline-block;
    height: 18px;
    width: 18px;
    margin-right: 5px;
    padding: 0;
    background-color: #45bcb8;
    border-radius: 100%;
    vertical-align: top;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}
.radio .radio-on{
    display: none;
}
.radio input:checked + span.radio-on{
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 100%;
    background: #FFFFFF;
    top: 4px;
    left: 4px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.4) inset;
    background-image: linear-gradient(#ffffff 0, #e7e7e7 100%);
    transform: scale(0, 0);
    transition: all 0.2s ease;
    transform: scale(1, 1);
    display: inline-block;
}

The most important thing in this method is the selection effect The class name: .radio input:checked + span.radio-on

+ is a pseudo-class of CSS2, its meaning is: p+p selects all

element ; element.

That is, find the selected (:checked) input, and the span element with the class name radio-on after it will have a selected circle effect.

There are many ways to beautify the label on the Internet by making the label into a circle, but in this case, the single-selected text must be placed outside the label, which results in a problem when clicking on the text. , the radio effect cannot be switched.

So I added a span with the class name radio-bg to the label to specifically make the large circle at the back, and then used a span with the class name radio-on to make the selected small circle in the front.

In this way, the text in the clicked label is retained, and the effect of radio selection can also be switched.

The above is the detailed content of How to use pure CSS3 to beautify the radio button sample code sharing. For more information, please follow other related articles on the PHP Chinese website!