可以使用CSS来完成,而无需大型框架。我已经使用复选框和单选按钮完成了此操作。
此方法无需添加新的HTML或引入任何JS库即可。 =>
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 > <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>


