Pure CSS3 beautify single choice button radio, css3 single choice radio

Pure CSS3 beautify single choice button radio, css3 single choice radio

This pure CSS3 beautifying single-choice button radio method applies to the following situations:

1. compatible with IE9 and later versions. If you need to be compatible with IE8, you need to write IE hack to remove the style.

2. Only the single-choice button radio is supported, because the circles in the selected style of the single-choice button can be made using CSS, but the selection effect of the check button checkbox needs to be checked by the image or icon font library.

3. Support for switching effects without JS

Is final:

HTML code:

<Label for = "man" class = "radio"> <span class = "radio-bg"> </span> <input type = "radio" name = "sex" id = "man" value = "male" checked = "checked"/> male <span class = "radio-on"> </span> </label> <label for =" woman "class =" radio "> <span class =" radio-bg "> </span> <input type =" radio "name =" sex "id =" woman "value = "female"/> female <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 name of the selected class:. radio input: checked + span. radio-on.

+ Is a pseudo-class of CSS2. It indicates that div + p Selects all <p> elements following the <div> element.

That is, find the selected (: checked) input, and then use the span element named radio-on to make the selected Circle effect.

 

There are many ways to beautify the Internet to make the label into a circle, but in this case, the single-choice text must be placed outside the label, which causes the single-choice effect cannot be switched when you click the text.

Therefore, I added a span class named radio-bg to the label to create a large circle, and then used a span class named radio-on to make the selected small circle.

In this way, the text in the label is retained, and the effect of single choice can be switched.