Custom beautification Checkbox implemented by CSS3 and jQuery, css3jquery

Source: Internet
Author: User

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/

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.