Custom Style sample code for checkboxes and radio with pure CSS

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