What is the effect after css and jquery beautification? Isn't that refreshing! This is an effect I saw from another script library. I thought it was quite good, and then I implemented it myself using jquery. For your appreciation!
If you don't talk much about it, go directly to the Code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Create a personalized single region and check box </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 (){
// Single answer
$ (". 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>
</Head>
<Body>
<Div class = "formt">
<Label class = "f_radio unselected">
<Input type = 'Radio 'name = "height" value = "dwarf"/>
Standard online tax administration </label>
<Label class = "f_radio unselected">
<Input type = "radio" name = "height" value = "average"/>
Online Tax Return Professional Edition </label>
<Label class = "f_radio unselected">
<Input type = "radio" name = "height" value = "giant"/>
Others </label>
<Hr/>
<Label class = "f_checkbox unchecked">
<Input type = "checkbox" name = "newsletter" value = "c" id = "c"/>
Invoice authentication </label>
<Label class = "f_checkbox unchecked">
<Input type = "checkbox" name = "newsletter" value = "d" id = "d"/>
Tax-related authentication </label>
</Div>
<Label for = "male">
Male </label>
<Input type = "checkbox" name = "sex" id = "male"/>
</Body>
</Html>
Pictures can be taken by yourself.