Detailed explanation of css3 beautification radio button radio example-HTML Tutorial-php.cn

Detailed explanation of css3 beautification radio button radio example

WBOY

Release： 2017-06-30 16:21:53

Original

2020 people have browsed it

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>

Copy after login

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

Copy after login

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

elements immediately after the

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!