CSS3 implement a single, multi-select button to change its native style with pictures instead of

Recently began to write a blog, so the first few months to do the project encountered problems to sort out, it is well known that the form of a write element native style is not very good-looking, the project used in the time needed to optimize, today I will write a radio button a lot of selection button style optimization, First you have to make a button to select the image before the picture and button selected. And then there's the code. Directly on the code: (The code is more, this is my previous project when the style has moved over, the style of anything can be written on their own.) )

The HTML code is structured as follows:

1 <Divclass= "Radio" > 2     <label>3         <inputtype= "Radio"name= "Sex"value="" />4         <Divclass= "option"></Div><!--the div is filled with a picture of the optimized button -5         <spanclass= "Opt-text">Man</span>6     </label>7 </Div>8 <Divclass= "Radio">9     <label>Ten         <inputtype= "Radio"name= "Sex"value="" /> One         <Divclass= "option"></Div><!--the div is filled with a picture of the optimized button - A         <spanclass= "Opt-text">Woman</span> -     </label> - </Div>

The CSS code is as follows:

1 Label{/*set the style of a label*/2 width:100%;3 padding:10px 0px;4 Display:Block;5 Line-height:20px;6 Position:relative;7 Font-weight:Normal;8}9. Radio. Option{/*Set the optimized button image to the background image of the Div, and position the div above the native style to cover the native style. */Ten width:25px;Height:25px;position:Absolute;Top:10px; Left:0px;background-size:cover;background:URL (img/radio.png) no-repeat;background-size:cover; -}Radio Input[type= "Radio"]{/*for the sake of insurance, hide the native style*/Display:Inline-block;Margin-right:15px;Opacity:0; at}input[type= "Radio"]:checked+div{/*when Radiuo is selected, replace the background image of the div tag below input*/background:URL (img/radio-checked.png) no-repeat;background-size:cover; -}

Finally, put a picture:

CSS3 implement a single, multi-select button to change its native style with pictures instead of