Examples of customizing radio, checkbox styles using CSS

Used to do custom style radio, checkbox, always the following structure

<label>    <span class= "Diyradio" >        <input type= "Radio" name= "value=" ">    </span>    <span> Text </span></label>

Then define the Diyradio style as the new radio, and then use JS to do the correlation.

I know today. can use <label></label> tags for properties +: checked, pure CSS
( really should not, learn things still need to be serious, meticulous point.) )

Examples of DIY single options are as follows:

<!--HTML--><p class= "Radio-beauty-container" > <label> <span class= "Radio-name" >radio1</span> <input type= "Radio" name= "Radioname" id= "radioName1" hidden/&        Gt <label for= "radioName1" class= "radio-beauty" ></label> </label> <label> <span class = "Radio-name" >radio2</span> <input type= "Radio" name= "Radioname" id= "radioName2" hidden/> < ; label for= "RadioName2" class= "radio-beauty" ></label> </label> <label> <span class= "R Adio-name ">radio3</span> <input type=" Radio "name=" Radioname "id=" RadioName3 "hidden/> <la Bel for= "RadioName3" class= "radio-beauty" ></label> </label></p> 

/* css */.radio-beauty-container {font-size:0;}.  Radio-beauty-container. Radio-beauty:hover,. Radio-beauty-container input[type= "Radio"]:checked +. Radio-beauty {  padding:2px;  Background-color:green; Background-clip:content-box;}.  Radio-beauty-container. radio-name {vertical-align:middle; font-size:16px;}.  Radio-beauty-container. radio-beauty {width:18px;  height:18px;  Box-sizing:border-box;  Display:inline-block;  border:1px solid Green;  Vertical-align:middle;  margin:0 15px 0 3px; border-radius:50%;}. Radio-beauty-container. radio-beauty:hover {box-shadow:0 0 7px green;}