JQuery CSS3 custom beautification Checkbox implementation code, jquerycss3

JQuery CSS3 custom beautification Checkbox implementation code, jquerycss3

:

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

Next, let's take a look at the source code for implementing this simplified version of Checkbox,Main IdeasIt is used to hide the original checkbox and radiobox, and a div is used to simulate the checkbox/radiobox, and jQuery is used 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 */

The above is all the content of this article, and I hope it will help you learn jquery programming.