Custom Landscaping checkbox and Radiobox for CSS3 and jquery implementations

Source: Internet
Author: User
Tags filter relative

Now you can often see some very peculiar form elements on the web, for example, CheckBox checkbox and Radiobox, the default style of the browser is really ugly, and even more painful is the style of each browser is not uniform, given that more and more users now use modern browsers, So we can boldly use CSS3 to customize these check boxes and the Radio box, first look at the preview:

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

Of course we can look at demo demo here.

Let's take a look at the source code that implements this landscaped checkbox. The main idea is to use the hidden original checkbox and Radiobox, use a div to simulate the checkbox/radiobox, and use jquery to complete the selection of the animation effect of the switch.

Let's take a look at the HTML code:

<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>favorite music:</p>
</li>
<li>
<input type= "checkbox" Name= "Check-box"/> <span>pop music</span>

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

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

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

</li>
</ul>



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 (2 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);
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 ("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 (2 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);
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;
}



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");
});



This code gives you a little bit of animation when you select and deselect.

This checkbox and Radiobox are introduced, in addition to some are similar to the checkbox and Radiobox rewrite, more trouble, we can go to see: CSS3 Beautiful custom checkbox checkbox 9 charming style, Pure CSS3 Landscaping checkbox and Radiobox buttons look stylish.



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.