使单选按钮看起来像按钮

Question

我想要一组用于捐赠表格的单选按钮，但是我希望它们看起来像按钮而不是圆形刻度盘。

制作这样的东西的最佳方法是什么？另外，请记住，它必须与 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;
}

谢谢

原文由 Richard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它可以用 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>

原文由 PlantTheIdea 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

编辑： 如果您需要支持 IE 浏览器，这不是解决方案。

---

您可以使用 CSS 外观属性：

 $(':radio').on('change', function() {
  console.log(this.id);
});

 input[name=amount] {
  display: none
}

.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;
  cursor: pointer;
  -webkit-appearance: button;
  /* WebKit */
  -moz-appearance: button;
  /* Mozilla */
  -o-appearance: button;
  /* Opera */
  -ms-appearance: button;
  /* Internet Explorer */
  appearance: button;
  /* CSS3 */
}

.donate-now label:hover {
  background: #DDD;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="donate-now">
  <li>
    <label for="a25">
            <input type="radio" id="a25" name="amount">$25</label>
  </li>
  <li>
    <label for="a50">
            <input type="radio" id="a50" name="amount">$50</label>
  </li>
  <li>
    <label for="a75">
            <input type="radio" id="a75" name="amount" checked="checked">$75</label>
  </li>
  <li>
    <label for="a100">
            <input type="radio" id="a100" name="amount">$100</label>
  </li>
  <li>
    <label for="other">
            <input type="radio" id="other" name="amount">other:
            <input type="text" id="otherAmount" name="numAmount">
        </label>
  </li>
</ul>

 -webkit-appearance: button; /* WebKit */
-moz-appearance: button; /* Mozilla */
-o-appearance: button; /* Opera */
-ms-appearance: button; /* Internet Explorer */
appearance: button; /* CSS3 */

原文由 A. Wolff 发布，翻译遵循 CC BY-SA 4.0 许可协议