当前位置 :| 主页>CSS实例>

超炫的单选框与复选框效果

来源：cssplay 作者：cssplay 时间：2008-08-18 点击：

　　在DIV+CSS构建的网页中，表单一直是一个比较头疼的问题，表单的布局与样式的定义还需要更多的学习与思考，今天介绍一款CSS表单，超炫的单选框与复选框效果。非常棒的感觉，希望对大家以后的布局有参考意义。

　　我们看正常情况下此表单的效果：

超炫的单选框与复选框效果

　　我们看经过CSS样式定义后的效果：

超炫的单选框与复选框效果

　　实现这样的效果，作者除了对表单元素进行样式定义，还用JS对其进行了控制。

示例代码运行框如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ARC - www.cssplay.org.cn</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <script src="http://www.cssplay.org.cn/example/ARC.js" type="text/javascript"></script> <link href="http://www.cssplay.org.cn/example/ARC_checkbox.css" rel="stylesheet" type="text/css"> <link href="http://www.cssplay.org.cn/example/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.cssplay.org.cn</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>
提示：您可以先修改部分代码再运行

我们看下面的CSS代码：

/* Off state for a ARC checkbox */
#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;
}

Tag：CSS实例 效果 复选框 单选框 超炫 checkbox

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：没有了
下一篇：用图片模拟实现超漂亮的选框checkbox效果

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表

热点实例