Custom Landscaping checkbox and Radiobox for CSS3 and jquery implementations

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.