我想要一套捐赠形式的单选按钮，但是我希望他们看起来像按钮，而不是圆圈拨号。
做这样的事情最好的办法是什么？另外，请记住，它必须与IE8一起工作。
这是我到目前为止，http://jsfiddle.net/YB8UW/
.donate-now {
list-style-type:none;
margin:25px 0 0 0;
padding:0;
}
.donate-now li {
float:left;
margin:0 5px 0 0;
}
.donate-now label {
padding:5px;
border:1px solid #CCC;
cursor:pointer;
}
.donate-now label:hover {
background:#DDD;
}
谢谢
解决方法
不要听这些说不通CSS的人，或者更糟的是推荐一些大框架。我一直都用复选框和单选按钮来完成。
这可以不添加新的HTML或引入任何JS库。 => jsFiddle
HTML的新订单
<ul class="donate-now">
<li>
<input type="radio" id="a25" name="amount" />
<label for="a25">$25</label>
</li>
<li>
<input type="radio" id="a50" name="amount" />
<label for="a50">$50</label>
</li>
<li>
<input type="radio" id="a75" name="amount" checked="checked" />
<label for="a75">$75</label>
</li>
<li>
<input type="radio" id="a100" name="amount" />
<label for="a100">$100</label>
</li>
<li>
<input type="radio" id="other" name="amount" />
<label for="other">other:</label>
</li>
<li>
<input type="text" id="otherAmount" name="numAmount" />
</li>
</ul>
CSS
.donate-now {
list-style-type:none;
margin:25px 0 0 0;
padding:0;
}
.donate-now li {
float:left;
margin:0 5px 0 0;
width:100px;
height:40px;
position:relative;
}
.donate-now label,.donate-now input {
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.donate-now input[type="radio"] {
opacity:0.01;
z-index:100;
}
.donate-now input[type="radio"]:checked + label,.Checked + label {
background:yellow;
}
.donate-now label {
padding:5px;
border:1px solid #CCC;
cursor:pointer;
z-index:90;
}
.donate-now label:hover {
background:#DDD;
}
这是十分钟的黑客版本，您可以进一步清理它，但它显示了一个很简单的例子。
