我想要一组用于捐赠表格的单选按钮,但我希望它们看起来像按钮而不是圆形刻度盘。
制作这样的东西的最佳方法是什么?另外,请记住,它必须与 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 的新秩序
这是十分钟的 hacky 版本,您可以进一步清理它,但它很好地展示了它是多么简单。
.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;
}
<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>
关于jquery - 使单选按钮看起来像按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16242980/