Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use CSS3 to beautify single and multi-check boxes". In daily operation, I believe that many people have doubts about how to use CSS3 to beautify single-check boxes and multi-check boxes. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use CSS3 to beautify single-check boxes and multi-check boxes". Next, please follow the editor to study!

Many times we need to beautify the single-check box radio and the multi-check box checkbox, because the original style is ugly and the performance is not uniform. CSS3 used to be simulated with js, but now it is possible to beautify radio and checkbox with pure CSS. For mobile, the relevant simulation style has been written for a long time: a switch switch button suitable for mobile checkbox and css3 implementation. These two articles only support pages on the mobile side, and the input elements on webkit that also support single tags are using pseudo classes (: before or: after). Recently, I have done a PC-side project, considering that it is compatible with more PC browsers, so I have made some improvements on this basis.

Take a look at the HTML structure:

Html Code:

Male

This structure has a label tag that contains the input element and the I element. The basic principle is: first use visibility:hidden;opacity:0; to "hide" the input element, and take advantage of the characteristics of the label tag to select or uncheck the input element when you click. The I element, combined with pseudo classes (: before or: after), simulates the appearance of radio-check box radio and multi-box checkbox.

Finally, look at the CSS code:

Css Code:

/ * radio*/

Label.bui-radios-labelinput {

Position:absolute

Opacity:0

Visibility:hidden

}

Label.bui-radios-label.bui-radios {

Display:inline-block

Position:relative

Width:13px

Height:13px

Background:#FFFFFF

Border:1pxsolid#979797

Border-radius:50%

Vertical-align:-2px

}

Label.bui-radios-labelinput:checked+.bui-radios:after {

Position:absolute

Content: ""

Width:7px

Height:7px

Background-color:#fff

Border-radius:50%

Top:3px

Left:3px

}

Label.bui-radios-labelinput:checked+.bui-radios {

Background:#00B066

Border:1pxsolid#00B066

}

Label.bui-radios-labelinput:disabled+.bui-radios {

Background-color:#e8e8e8

Border:solid1px#979797

}

Label.bui-radios-labelinput:disabled:checked+.bui-radios:after {

Background-color:#c1c1c1

}

Label.bui-radios-label.bui-radios-anim.bui-radios {

-webkit-transition:background-colorease-out.3s

Transition:background-colorease-out.3s

}

Here are a few points to be noted:

The check box in 1.checkbox uses iconfont. Of course, you can change the picture or simulate it with a pseudo class (: before or: after).

two。 Added some simple transition effects or background animation.

3. It is particularly important to make use of the characteristics of label tags. For students with poor HTML foundation, please first understand the characteristics of label tags.

At this point, the study on "how to use CSS3 to beautify single and multi-check boxes" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.