JQuery CSS3 Custom Landscaping checkbox Implementation Code _jquery

Effect Chart:

is better than the default, personal aesthetic should still be able to.

Next we look at the implementation of this beautiful version of the checkbox source code, the main idea is to use the hidden original checkbox and Radiobox, with a div to simulate checkbox/radiobox, and use jquery to complete the animation effect when choosing a switch.

Let's take a look at the HTML code:

<div class= "wrapper" >
  <ul>
   <li>
    <p>Gender:</p>
   </li>
   <li>
    <input type= "Radio" name= "RADIO-BTN"/>male
   </li>
   <li>
    <input type = "Radio" name= "RADIO-BTN"/>female
   </li>
  </ul>
  <ul>
   <li>
    <p> Recommended website:</p>
   </li>
   <li>
    <input type= "checkbox" Name= "Check-box"/> <span> q </span>

   </li>
   <li>
    <input type= "checkbox" Name= "Check-box"/ > <span> Collayi </span>

   </li>
   <li>
    <input type= "checkbox" Name= "Check-box "/> <span>hwq2.com</span>

   </li>
   <li>
    <input type=" 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, the classname of 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>");

So then we're going to hide the original checkbox and set the mock div style:

. 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); 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); 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); 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); 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 Div, so that the style of div is the same as checkbox and Radiobox.

Finally, we'll simulate click and uncheck, and this part is implemented in 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 * *

The above is the entire content of this article, I hope to learn from the jquery program to help.