如何使窗体中的单选按钮具有自定义外观

Question

代码：

<label class="form__label" for="urgency">Urgency</label>
<input class="form__input no-input-animation" id="urgency" name="urgency" type="radio" required>
<div class="urgency-text critical">Critical</div>
<div class="urgency-text high">High</div>
<div class="urgency-text medium">Medium</div>
<div class="urgency-text low">Low</div>

这显示了一个单选按钮，每个紧急div作为一个选项。我能理解为什么。

我希望我的按钮没有单选复选框，每个div都有自己的选项，带有value属性。

示例：

---

选择状态：

[可用][空闲][请勿打扰]

---

方括号[]中的每个项目都是可点击的，并且有自己的值属性，例如available

如何在表单中执行此操作？

谢谢。

Answer 1

我建议您将其作为一个示例。我相信这正是你想要的。

<div class="container">
<div class="segmented-control" style="width: 100%; color: #5FBAAC">
<input type="radio" name="sc-1-1" id="sc-1-1-1">
<input type="radio" name="sc-1-1" id="sc-1-1-2">
<input type="radio" name="sc-1-1" id="sc-1-1-3" checked>
<label for="sc-1-1-1" data-value="High">High</label>
<label for="sc-1-1-2" data-value="Medium">Medium</label>
<label for="sc-1-1-3" data-value="Low">Low</label>
</div>

CodePen示例&lt--就是你想要的。

访问此博客了解更多信息。