是否可以创建像这样的单选按钮JQuery http://jqueryui.com/demos/button/#radio那些,用纯html/css?
thanks
试试这个小提琴:http://jsfiddle.net/mcXm7/1/ http://jsfiddle.net/mcXm7/1/
这个示例是 100% 纯 CSS,它在较新的浏览器上运行良好(当然,请随意添加所有必要的样式以使按钮看起来像您的示例中一样)
HTML
<input type="radio" name="rd" id="choice1" value="1">
<label for="choice1" >Choice 1</label>
<input type="radio" name="rd" id="choice2" value="2">
<label for="choice2" >Choice 2</label>
<input type="radio" name="rd" id="choice3" value="3">
<label for="choice3" >Choice 3</label>
CSS
label { display : inline-block;
padding : 2px 5px;
cursor : pointer;
border : 1px #b6b6b6 outset; }
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
border: 1px #b6b6b6 inset;
}
/* hover style */
input[type="radio"] + label:hover { ... }
input[type="radio"]:checked + label:hover { ... }
很遗憾:checked
不支持IE<9
: see http://www.impressivewebs.com/css3-support-ie9/ http://www.impressivewebs.com/css3-support-ie9/对于可用的 css/css3 功能的完整列表,因此对于较旧的浏览器,需要 javascript 后备才能正常工作。
JS 回退的基本示例:http://jsfiddle.net/mcXm7/2/ http://jsfiddle.net/mcXm7/2/(无需同时加载 jQuery UI)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)