Custom beautification Checkbox implemented by CSS3 and jQuery, css3jquery

Custom beautification Checkbox implemented by CSS3 and jQuery, css3jquery

:

Is it better than the default one, and the Personal Aesthetic should still be OK.

Of course, we can view the DEMO here.

Next, let's take a look at the source code for implementing this simplified version of Checkbox. The main idea is to hide the original checkbox and radiobox, use a div to simulate the checkbox/radiobox, and use jQuery to complete the animation effect during the selection and switching.

Let's take a look at the HTML code:

<Div class = "wrapper"> <ul> <li> <p> Gender: </p> </li> <input type = "radio" name = "radio-btn"/> Male </li> <input type =" radio "name =" radio-btn "/> Female </li> </ul> <li> <p> recommended websites: </p> </li> <input type = "checkbox" name = "check-box"/> <span> What should I ask </span> </li> <li> <input type = "checkbox" name = "check-box"/> <span> ke leyi </span> </li> <input type =" checkbox "name =" check-box "/> <span> hwq2.com </span> </li> <input type =" checkbox "name =" check-box" /> <span> hovertree.net </span> </li> </ul> </div>

Then we use 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> </div> ");
$ ("Input [name =" check-box "]"). wrap ("<div class =" check-box "> <I> </div> ");

Next we will hide the original checkbox and set the style of the simulated 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; position: absolute; left: 3px; bottom:-15px; width: 16px; height: 16px; opacity :. 5;-webkit-transition: all 400 ms bytes-in-out;-moz-transition: all 400 ms bytes-in-out;-o-transition: all 400 ms bytes-in-out; transition: all 400 ms bytes-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 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 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;}/* Ask hovertree.com */

The above CSS3 Code uses a style to customize the div, so that the style of the div is the same as that of the checkbox and radiobox.

Finally, we can simulate clicking, selecting, and unselecting. This part is also implemented using 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") ;});/* Ask hovertree.com */

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