如何创建单选按钮作为按钮？

如何创建常规单选按钮来像使用css样式的普通按钮？如何创建单选按钮作为按钮？

这里是我的单选按钮：

<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>

而且我的CSS：

.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; 
}

来源

2011-02-24 Rails beginner

我不明白。你想要风格的按钮或风格的单选按钮？ – 2011-02-24 11:26:58

您将如何表示“已检查”按钮？我们需要更多细节，截图也将有所帮助。 – 2011-02-24 11:27:39

使单选按钮成为可点击的按钮 – 2011-02-24 11:29:52

它涉及到隐藏的单选按钮元素，并把在不同的元素，而不是（在运行时，保持向后兼容使用不支持JS的浏览器），然后将新元素的更改回显到隐藏的单选按钮的状态。

由于您已经在使用jQuery，因此您可能会考虑使用jQuery UI，它具有exactly this functionality。

来源

2011-02-24 11:26:47

如何创建单选按钮作为按钮？

回答

相关问题