The image above is after the CSS and jquery beautification effect, how? Isn't it cool? This is an effect I saw from another script library, and it was pretty good, and then I realized one with jquery. For everyone to appreciate!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Create personalized Radio boxes and check boxes </title>
<style type= "Text/css" >
*
{
margin:0;
padding:0;
font-size:12px;
}
. formt
{
width:400px;
margin:10px Auto;
border:1px solid #ccc;
height:200px;
padding:10px;
}
. unselected
{
Background-image:url (rdo_off.png);
}
. Selected
{
Background-image:url (rdo_on.png);
}
. Unchecked
{
Background-image:url (chk_off.png);
}
. checked
{
Background-image:url (chk_on.png);
}
. F_checkbox,. F_radio
{
BACKGROUND-POSITION:3PX Center;
Background-repeat:no-repeat;
Cursor:pointer;
Display:block;
height:16px;
line-height:120%;
PADDING:4PX 24px;
}
. FORMT Input
{
Left: -9999px;
Position:absolute;
}
. addcolor
{
color:red;
}
</style>
<script type= "Text/javascript" src= "Jquery-1.4.2.min.js" > </script>
<script type= "Text/javascript" >
$(
function () {
Radio
$ (". F_radio"). Click (
function () {
$ (this). AddClass ("selected"). Removeclass ("unselected"). Siblings (". Selected"). Removeclass ("selected"). AddClass ( "Unselected");
}
);
Check
$ (". F_checkbox"). Toggle (
function () {
$ (this). AddClass ("checked");
$ (this). Children ("input"). attr ("Checked", "checked");
},
function () {
$ (this). Removeclass ("checked");
$ (this). Children ("input"). Removeattr ("checked");
}
);
}
);
</script>
<body>
<div class= "FORMT" >
<label class= "F_radio unselected" >
<input type= ' Radio ' name= "height" value= "dwarf"/>
Online Tax Standard Edition </label>
<label class= "F_radio unselected" >
<input type= "Radio" name= "height" value= "average"/>
Online Tax Report Professional Edition </label>
<label class= "F_radio unselected" >
<input type= "Radio" name= "height" value= "giant"/>
Other </label>
<label class= "F_checkbox unchecked" >
<input type= "checkbox" name= "Newsletter" value= "C" id= "C"/>
Invoice Certification </label>
<label class= "F_checkbox unchecked" >
<input type= "checkbox" name= "Newsletter" value= "D" id= "D"/>
Tax-related certification </label>
</div>
<label for= "Male" >
Male</label>
<input type= "checkbox" name= "Sex" id= "male"/>
</body>
Pictures you can own screenshots.
