Custom landscaping checkbox implemented by CSS3 and jquery

：

is not more beautiful than the default, the personal aesthetic should still be able to.

Of course we can check the demo demo here.

Next, let's take a look at the source code that implements this beautiful version of the checkbox. The main idea is to use a div to simulate checkbox/radiobox using the Hidden checkbox and Radiobox, and use jquery to complete the animation of the selection switch.

Let's take a look at the HTML code:

<Divclass= "wrapper">        <ul>            <Li>                <P>Gender:</P>            </Li>            <Li>                <inputtype= "Radio"name= "Radio-btn" />Male</Li>            <Li>                <inputtype= "Radio"name= "Radio-btn" />Female</Li>        </ul>        <ul>            <Li>                <P>Recommended Sites:</P>            </Li>            <Li>                <inputtype= "checkbox"name= "Check-box" /> <span>How to ask</span>            </Li>            <Li>                <inputtype= "checkbox"name= "Check-box" /> <span>Collayi</span>            </Li>            <Li>                <inputtype= "checkbox"name= "Check-box" /> <span>Hwq2.com</span>            </Li>            <Li>                <inputtype= "checkbox"name= "Check-box" /> <span>Hovertree.net</span>            </Li>        </ul>    </Div>

Then we use the jquery code to create a div for each checkbox and Radiobox, and the classname for this div is check-box and radio-btn.

$ ("input[name=" radio-btn "]"). Wrap ("<div class=" radio-btn "><i></i></div>");
$ ("input[name=" Check-box "]"). Wrap ("<div class=" Check-box "><i></i></div>");

Then let's hide the original checkbox and set the style of the analog div:

. RADIO-BTN input[type= "Radio"],. Check-box input[type= "checkbox"] {
Visibility:hidden;
}

. Check-box{width:22px;Height:22px;cursor:Pointer;Display:Inline-block;margin:2px 7px 0 0;position:relative;Overflow:Hidden;Box-shadow:0 0 1px #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;Border-radius:3px;background:RGB (255, 255, 255);background:-moz-linear-gradient (Top, RGBA (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, Rgba (255, 255, 255, 1)), Color-stop (47%, Rgba (246, 246 , 246, 1)), Color-stop (100%, Rgba (237, 237, 237, 1)));background:-webkit-linear-gradient (Top, RGBA (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);background:-o-linear-gradient (Top, RGBA (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);background:-ms-linear-gradient (Top, RGBA (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);background:linear-gradient (to bottom, rgba (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= "#ffffff", endcolorstr= "#ededed", gradienttype=0) ;Border:1px solid #ccc;}. Check-box I{background:URL ("http://hovertree.com/texiao/html5/32/css/check_mark.png") No-repeat Center Center;position:Absolute; Left:3px;Bottom:-15px;width:16px;Height:16px;Opacity:. 5;-webkit-transition:All 400ms ease-in-out;-moz-transition:All 400ms ease-in-out;-o-transition:All 400ms ease-in-out;transition:All 400ms ease-in-out;-webkit-transform:Rotatez ( -180deg);-moz-transform:Rotatez ( -180deg);-o-transform:Rotatez ( -180deg);Transform:Rotatez ( -180deg);}. Checkedbox{-moz-box-shadow:inset 0 0 5px 1px #ccc;-webkit-box-shadow:inset 0 0 5px 1px #ccc;Box-shadow:inset 0 0 5px 1px #ccc;Border-bottom-color:#fff;}. Checkedbox I{Bottom:2px;-webkit-transform:Rotatez (0deg);-moz-transform:Rotatez (0deg);-o-transform:Rotatez (0deg);Transform:Rotatez (0deg);}/*Custom radio Button*/. Radio-btn{width:20px;Height:20px;Display:Inline-block;float: Left;margin:3px 7px 0 0;cursor:Pointer;position:relative;-webkit-border-radius:100%;-moz-border-radius:100%;Border-radius:100%;Border:1px solid #ccc;Box-shadow:0 0 1px #ccc;background:RGB (255, 255, 255);background:-moz-linear-gradient (Top, RGBA (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, Rgba (255, 255, 255, 1)), Color-stop (47%, Rgba (246, 246 , 246, 1)), Color-stop (100%, Rgba (237, 237, 237, 1)));background:-webkit-linear-gradient (Top, RGBA (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);background:-o-linear-gradient (Top, RGBA (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);background:-ms-linear-gradient (Top, RGBA (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);background:linear-gradient (to bottom, rgba (255, 255, 255, 1) 0, RGBA (246, 246, 246, 1) 47%, Rgba (237, 237, 237, 1) 100%);Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= "#ffffff", endcolorstr= "#ededed", gradienttype=0) ;}. Checkedradio{-moz-box-shadow:inset 0 0 5px 1px #ccc;-webkit-box-shadow:inset 0 0 5px 1px #ccc;Box-shadow:inset 0 0 5px 1px #ccc;}. radio-btn I{Border:1px solid #E1E2E4;width:10px;Height:10px;position:Absolute; Left:4px;Top:4px;-webkit-border-radius:100%;-moz-border-radius:100%;Border-radius:100%;}. Checkedradio I{Background-color:#898A8C;}/*how to ask Hovertree.com*/

The above CSS3 code is to use styles to customize the Div, so that the div style is the same as the checkbox and the Radiobox.

Finally, let's simulate the click and uncheck, which is also implemented with jquery:

$ (". Radio-btn"). On ("click", Function (){var _this = $ (this), block = _this.parent (). parent (); Block.find ("Input:Radio "). attr (" checked ", false);block.find (". Radio-btn"). Removeclass ("Checkedradio");    _this.addclass ("Checkedradio"); _this.find ("Input:Radio "). attr (" Checked ", true);}); $.fn.togglecheckbox = function (){this.attr ("Checked",!this.attr ("checked"));}$ (". Check-box"). On ("click", Function (){$ (this). Find (":checkbox "). Togglecheckbox ();$ (this). Toggleclass ("Checkedbox");});/*how to ask Hovertree.com*/

Online Demo: http://hovertree.com/texiao/html5/32/

Transferred from: http://hovertree.com/h/bjaf/css3checkbox.htm

Special Effects Library: http://www.cnblogs.com/roucheng/p/texiao.html

Custom landscaping checkbox implemented by CSS3 and jquery