GOOCODE - Find your code/scripts

6 Radio box and checkbox need to beautify it? Of course, the original style of the same century has been unable to meet the needs of our customers. Form a lot of controls need to beautify, we have to do with javascript landscaping, but also directly to the use of CSS to beautify, and today I introduce you to use pure CSS to achieve radio and checkbox landscaping.

We know that many of the ways to use JS to beautify the form controls are not very satisfactory, with the introduction of js and css, and some even use pictures and font icons, but also rely on jQuery, and complex, poor maintainability.

Use magic-check
Magic-check only a few lines of CSS code can be achieved checkbox and beautification of the radio form. The css file is loaded first.

<link rel="stylesheet" type="text/css" href="magic-check.css"> 

Then, as long as the input element to add a CSS class magic-checkbox or magic-radio can.
Radio:

<input class="magic-radio" type="radio" name="radio" id="r1"> 
<label for="r1">Normal</label> 

Checkbox:

<input class="magic-checkbox" type="checkbox" name="layout" id="c1"> 
<label for="c1">Normal</label> 

Careful friends can look at css code, CSS will hide checkbox and radio, and then use: before and: after positioning redraw checkbox and radio appearance, so as to achieve landscaping effect, support IE9 +.