Question

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

如何在没有显示正常单选按钮的“孔”的情况下实现这种外观？

谢谢

Answer 1

如果您查看devTools，则此格式的按钮由链接<a>构成。您可以使用按钮，div，跨度来实现。绝对没有单选按钮

Answer 2

第一步是隐藏浏览器的默认复选框。这可以通过使默认单选按钮不可见来实现。

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

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

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

检查随附的代码段，希望这是您要查找的内容。

.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>

如何设置表单单选按钮输入的样式以实现按钮外观？

2 个答案: