» » Use pure CSS to beautify radio and checkbox

 

Use pure CSS to beautify radio and checkbox

Author: bamboo06 on 14-12-2016, 00:48, views: 5472

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 +.

Category: CSS / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 3 Comments
  • 0 Articles
9 April 2017 09:18

Williamwaimi

Reply
  • Group: Members
  • РRegistered date: 8.04.2017
  • Status: Currently Offline
 
<
  • 0 Comments
  • 0 Articles
7 January 2018 20:29

AprilHic

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
online casino games
free casino games slots
<a href="http://casinobablogames.com/">free slots no download</a>
free casino games no download

<
  • 0 Comments
  • 0 Articles
10 January 2018 18:25

Brianculse

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
autocad 2011 sp2 download
<a href="http://autocadtymafq.com/#">autocad download</a>
autocad 2017 product key
autocad lt
autocad inventor serial number
<a href="http://autocadbnaqk.com/#">auto cad</a>
student autocad 2017
autocad 2018
autocad students

<
  • 0 Comments
  • 0 Articles
24 January 2018 03:26

Julieref

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
online casinos real money
casinos in michigan with hotels
<a href="http://bablcasinogames.com/">free casino games and poker</a>
casino games real money

<
  • 0 Comments
  • 0 Articles
6 March 2018 07:14

RonaldfeS

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
viagra sale in new zealand
<a href="http://fmviagraukfjg.com/#">viagra without prescription</a>
cheap-viagra.tv
viagra without a doctor prescription
where to buy viagra in vancouver
<a href="http://javiagraryjdf.com/#">buy viagra online</a>
order viagra safely
order viagra online
viagra sale over counter

Information
Comment on the news site is possible only within (days) days from the date of publication.