[英]How to create radio button as buttons?
如何创建常规单选按钮以喜欢使用 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 样式的普通按钮?
这是我的单选按钮:
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Radio1</label>
<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">Radio2</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Radio3</label>
</div>
还有我的 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ:
.radio-toolbar {width:410px;}
.radio-toolbar input[type="radio"] {
display:none;
}
.radio-toolbar label {
display:inline-block;
background:#FFF;
font-family:"Arial Black", sans-serif;
font-size:12px;
color:#666666;
width:106px;
padding-left:4px;
}
.radio-toolbar [type="radio"]:checked + label {
background:url("../images/radiochecked.png") no-repeat;
color:#FFF;
}
.radio1 [type="radio"]:checked + label {
background:url("../images/radio1.png") no-repeat;
color:#FFF;
}
.radio2 input[type="radio"]:checked + label {
background:url("../images/radio2.png") no-repeat;
color:#FFF;
}
.radio-toolbar label:hover {background-color:#bbb;
background:url("../images/radiohover.png") no-repeat;
color:#FFF;
}
.radio2 label:hover {background-color:#bbb;
}
它涉及隐藏单选按钮元素并改为放入不同的元素(在运行时,以保持与未启用 JS 的浏览器的向后兼容性),然后将对新元素的更改回显到隐藏单选按钮的 state。
由于您已经在使用 jQuery,因此您可能会考虑 jQuery UI,它恰好具有此功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.