如何样式表单单选按钮输入以实现按钮外观？ [关闭]答案

【问题标题】：How to Style form radio button input to achieve push button look? [closed]如何样式表单单选按钮输入以实现按钮外观？ [关闭]
【发布时间】：2019-12-18 08:40:03
【问题描述】：

我想创建一个类似于https://www.charitywater.org/donate 的捐赠表单，我相信那些蓝色的水平按钮是已使用一些自定义代码设置样式的单选按钮。

如何在不显示普通单选按钮的“孔”的情况下实现这种外观？

谢谢

【问题讨论】：

到目前为止，您尝试了哪些方法来重现您观察到的效果？例如，您是否右键单击 > 检查元素？你写过 HTML、CSS 或 JavaScript 吗？ Stack Overflow 作为一个社区，乐于帮助您解决问题，但我们不会为您编写代码；请：拿起tour，并阅读“How to Ask”和“minimal reproducible example”指南。
如果这真的是你迄今为止想出的全部，那么恐怕你需要做更多的研究；如果您浏览互联网，您会发现此类用户界面存在教程。
我在网上找了一圈，没找到，所以才来这里，如果有链接，可以分享一下。
不允许在 SO 上要求链接作为问题的答案。

标签： javascript html css forms user-interface

【解决方案1】：

第一步是隐藏浏览器的默认复选框。这可以通过将默认单选按钮呈现在视线之外来完成。

[type="radio"]:checked, [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

第二步是通过使用 CSS '+' 选择器将适当的样式应用于相应的标签元素，该选择器会选择紧跟在“单选”按钮之后的所有“标签”元素。

[type="radio"]:checked+label, [type="radio"]:not(:checked)+label {
    /* Your Styles Here */
}

检查附加的sn-p，我希望这就是你要找的。p>

.container {
  margin: 30px;
  font-family: sans-serif;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
  position: relative;
  padding: 15px 30px;
  cursor: pointer;
  border-radius: 5px;
  margin: 2px;
}

[type="radio"]:not(:checked)+label {
  border: 1px solid #dfdfd7;
  color: #9b9b94;
  background: #e9eae4;
}

[type="radio"]:not(:checked)+label:hover {
  background: #eee;
}

[type="radio"]:checked+label {
  background: #369ff4;
  border-color: #369ff4;
  color: #fff;
}

<form class="container">
    <input type="radio" id="test1" name="radio-group" checked>
    <label for="test1">$50</label>
    <input type="radio" id="test2" name="radio-group">
    <label for="test2">$100</label>
    <input type="radio" id="test3" name="radio-group">
    <label for="test3">$150</label>
</form>

【讨论】：

相反，OP 对 HTML 和 CSS 了解很多，只是引用的界面看起来有点棘手。

【解决方案2】：

如果您查看 devTools，此表单中的按钮是由链接 <a> 制作的。你可以使用按钮、div、span 来实现。绝对没有单选按钮

【讨论】：

我如何获取选定的值并用作表单输入
你可以添加，例如，一些 clsss，让它 .checked 到被检查的 div。在您查找带有 .checked 的 div 并获取其 textContent 之后。或者使用数据属性