《
超炫的单选框与复选框效果》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302349232013.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <,谷歌网站管理员工具的好处及使用;head> <title>ARC - www.jzxue.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- Mandatory ARC javascript and radio button style sheet -->,谷歌是如何做代码审查的; <script src="ARC.js" type="text/javascript"></script> <link href="ARC_checkbox.css" rel="stylesheet" type="text/css"> <link href="ARC_radio.css" rel="stylesheet" type="text/css"> <style type="text/css"> /* page formatting -- these are unrelated from the ARC method */ #makeMeAPrettyForm, #form2 { border: 2px solid #069; background-color: #fff; width: 400px; } #makeMeAPrettyForm h3, #form2 h3 { font-family: "Lucida Sans Unicode", Verdana, Arial, Sans-Serif; font-weight: normal; font-size: 1em; color: #fff; background-color: #069; padding: 10px 15px; margin: 0px; } #makeMeAPrettyForm p , #form2 p{ margin: 10px 20px; } </style> </head> <body> <h1>The Flog Lab -- www.jzxue.com</h1> <h2><strong>ARC</strong> — Adam's Radio & Checkbox Customisation Method</h2> <div id="labcontent"> <p> Usually the customiser is called from the onload event, but this is disabled here to illustrate the effect. <br /> Click the button below to apply the custom radio button styles... <br /> <input type="button" value="Customise Radio's & Checkboxes" onclick="initARC('makeMeAPrettyForm','radioOn','radioOff','checkboxOn','checkboxOff');initARC('form2','altRadioOn','altRadioOff','altCheckboxOn','altCheckboxOff');" /> </p> <form id="makeMeAPrettyForm" METHOD=GET ACTION="page"> <h3>Which of the following is your favorite food?</h3> <p> <input id="a" type="radio" name="food" checked value="pizza" /><label for="a">Pizza</label> <br /> <input id="b" type="radio" name="food" value="lasagna" /><label for="b">Lasagna</label> <br /> <input id="c" type="radio" name="food" value="meatloaf" /><label for="c">Meatloaf</label> <br /> <input id="d" type="radio" name="food" value="steak" /><label for="d">Steak</label> <br /> <input id="e" type="radio" name="food" value="tofu" /><label for="e">Tofu</label> <br /> <input id="f" type="radio" name="food" value="icecream" /><label for="f">Ice Cream</label> <br /> <input id="g" type="radio" name="food" value="nacho" /><label for="g">Nachos</label> <br /> <input id="h" type="radio" name="food" value="chocolate" /><label for="h">Chocolate</label> <br /> <input id="i" type="radio" name="food" value="kebab" /><label for="i">Kebab</label> <br /> <input id="j" type="radio" name="food" value="chinese" /><label for="j">Chinese</label> <br /> <input id="k" type="radio" name="food" value="thai" /><label for="k">Thai</label> <br /> <input id="l" type="radio" name="food" value="italian" /><label for="l">Italian</label> <br /> </p> <h3>Shopping List:</h3> <p> <input type="checkbox" id="c1" value="1",谈选择门户网站模板程序应注意的五个基本问题; name="checkgroup" checked> <label for="c1">Steak</label> <br>,谈谈自己对网址站的一些理解和思考; <input type="checkbox" id="c2" value="1" name="checkgroup"> <label for="c2">Pasta</label> <br> <input type="checkbox" id="c3" value="1" name="checkgroup"> <label for="c3">Nutella</label> <br> <input type="checkbox" id="c4" value="1" name="checkgroup"> <label for="c4">Onion</label> <br> </p> </form> <form id="form2" action=""> <h3>Another Radio Style</h3> <p> <input type="radio" name="group" value="radio" id="radio0" checked><label for="radio0">Radio</label> <br /> <input type="radio" name="group" value="radio" id="radio1"><label for="radio1">Radio1</label> <br /> <input type="radio" name="group" value="radio" id="radio2"><label for="radio2">Radio2</label> <br /> <input type="radio" name="group" value="radio" id="radio3"><label for="radio3">Radio3</label> <br /> <h3>Select Files to Download </h3> </p> <p> <input type="checkbox" id="ca1" value="1" name="checkgroup" checked><label for="ca1">Introduction</label> <br> <input type="checkbox" id="ca2" value="1" name="checkgroup"><label for="ca2">Code Samples</label> <br> <input type="checkbox" id="ca3" value="1" name="checkgroup"><label for="ca3">API</label> <br> <input type="checkbox" id="ca4" value="1" name="checkgroup"><label for="ca4">FAQ</label> <br>,谈谈网站运营中的坚持; </p> <input type="reset"> </form> </div> </body> </html>
Tag：单选框 复选框 单选框 复选框
--> [
网站建设之]超炫的单选框与复选框效果
在DIV+CSS构建的网页中，表单始终是一个比拟头疼的问题，表单的布局与样式的定义还须要更多的学习与思考，今天先容一款CSS表单，超炫的单选框与复选框效果。十分棒的感到，盼望对大家当前的布局有参考意思。
我们看畸形情形下此表单的效果：
咱们看经由CSS款式定义后的效果：
实现这样的效果，作者除了对表单元素进行样式定义，还用JS对其进行了把持。
查看运行后果：
运行代码复制代码另存代码珍藏本页 [Ctrl+A 全体抉择 提醒：你可先修正局部代码，再按运行]
我们看下面的CSS代码：
#labcontent .checkboxOff {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #666;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(checkbox_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}
/* On state for a ARC checkbox */
#labcontent .checkboxOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #000;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(checkbox_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}
/* Off state for a ARC checkbox */
#labcontent .altCheckboxOff {
display: inline;
padding: 20px 2px; /* NS 6 problem */
padding-left: 70px;
color: #666;
line-height: 60px;
font-family: "Courier New", Courier, mono;
font-size: 1.2em;
background-image: url(alt_checkbox_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
}
/* On state for a ARC checkbox */
#labcontent .altCheckboxOn {
display: inline;
padding: 20px 2px; /* NS 6 problem */
padding-left: 70px;
color: #000;
line-height: 60px;
font-family: "Courier New", Courier, mono;
font-size: 1.2em;
font-weight: bold;
background-image: url(alt_checkbox_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}
/* Off state for a ARC radio button */
.radioOff {
display: inline;
margin: 0px;
padding: 2px;
padding-left: 20px;
color: #666;
font: .8em/16px Verdana,Arial,Helvetica;
background: transparent url(off.gif) no-repeat 0% 50%;
}
/* On state for a ARC radio button */
.radioOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #000;
font: .8em/16px Verdana,Arial,Helvetica;
background: transparent url(on.gif) no-repeat 0% 50%;
}
/* use CSS to full effect with hover states. Ohhh, perty! */
.radioOn:hover {
background-image: url(on_hover.gif);
}
.radioOff:hover {
color: #333 !important;
background-image: url(off_hover.gif);
}
/* Alternative Off state for a ARC radio button */
.altRadioOff {
display: inline;
margin: 0px;
padding: 2px;
padding-left: 20px;
color: #000;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-image: url(alt_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
}
/* Alternative On state for a ARC radio button */
.altRadioOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(alt_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
text-decoration: underline;
}
(责任编辑：网站建设)
超炫的单选框与复选框效果相关文章