Detailed explanation of css3 beautification radio button radio example

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 it needs to be compatible with IE8, you need to write an IE hack to 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 selection effect of the check button checkbox requires an image or icon font library

3. No need JS supports switching effects

<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 class name of the selected effect: .radio input:checked + span.radio-on

+ is a pseudo-class of CSS2, and its meaning is: div+p selects all e388a4556c0f65e1904146cc1a846bee elements immediately after the dc6dce4a544fdca2df29d5ac0ea9906b 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.

The above is the detailed content of Detailed explanation of css3 beautification radio button radio example. For more information, please follow other related articles on the PHP Chinese website!