Custom Style sample code for checkboxes and radio with pure CSS

Source: Internet
Author: User
You should all know that the checkboxes and radio controls are special because they have different impressions on different platforms. So this article will show you how to use some of the properties of CSS3 to implement a custom checkbox and radio style, the need for friends can refer to the reference, let's take a look at it.

First Look at Checkboxes & radio on different platforms

We can use some of the properties of CSS3 to implement a custom checkbox & radio style.

HTML Code


Radio Input<p class= "Radio" >    <input id= "male" type= "Radio" name= "Gender" value= "male" >    < Label for= "Male" >Male</label>    <input id= "female" type= "Radio" name= "Gender" value= "female" >    <label for= "female" >female</label></p>//checkbox input<p class= "checkbox" >    <input Id= "Check1" type= "checkbox" name= "Check" value= "Check1" >    <label for= "Check1" >checkbox No. 1</label >    <input id= "Check2" type= "checkbox" name= "Check" value= "Check2" >    <label for= "Check2" > Checkbox No. 2</label></p>

CSS Code


label {display:inline-block;    Cursor:pointer;    position:relative;    padding-left:25px;    margin-right:15px; font-size:13px;}    Label:before {content: "";    Display:inline-block;    width:16px;    height:16px;    margin-right:10px;    Position:absolute;    left:0;    bottom:1px;    Background-color: #aaa; Box-shadow:inset 0px 2px 3px 0px rgba (0, 0, 0,. 3), 0px 1px 0px 0px rgba (255, 255, 255,. 8);}. Radio Label:before {border-radius:8px;}. CheckBox Label:before {border-radius:3px;} Input[type=radio],input[type=checkbox] {display:none;}    input[type=radio]:checked + Label:before {content: "\2022";    Color: #f3f3f3;    font-size:30px;    Text-align:center; line-height:18px;}    input[type=checkbox]:checked + Label:before {content: "\2713";    text-shadow:1px 1px 1px rgba (0, 0, 0,. 2);    font-size:15px;    Color: #f3f3f3;    Text-align:center; line-height:15px;} 

Compatibility

: Checked is not ideal for IE8 compatibility

Box-shadow is incompatible with IE8, but Box-shadow is optional for custom styles

: After:before is not compatible with double colons in IE8

: Checked Property compatibility

Box-shadow Property Compatibility

: Before:after Property Compatibility

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.