Html+css to implement a beautiful style of radio box, check box

Single box, check box is the function that the front-end needs, this article mainly introduced the HTML+CSS implementation of the Single box, check box beautiful style, the need for friends can refer to, hope to help you to complete a more beautiful style of the single box, check box.

1. Background map

Html

<p class= "Check-wrappers" >    <span class= "C-checkbox checked" >        <input type= "Radio" Autocomplete= "Off" name= "type" style= "Display:none;" value= "1" checked= "checked" >    </span>    < Span></span></p>

Css

. cart-checkbox.checked {    background-position: -29px 0;}. C-checkbox {    display:block;    width:25px;    height:25px;    margin:0 Auto;    Background:url (/shop-cart.png) no-repeat 0 0;    background-size:60px 120px;}

Have you learned it? Give it a try.