如何为表单中的单选按钮提供自定义外观？答案

【问题标题】：How do I give radio-buttons in a form a custom look?如何为表单中的单选按钮提供自定义外观？
【发布时间】：2020-11-24 18:22:52
【问题描述】：

代码：

<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

如何在表单中完成这项工作？

谢谢。

【问题讨论】：

" 我希望我的按钮没有单选复选框，并且每个 div 都有自己的选项，具有 value 属性。" 请解释这一行，这对我来说有点混乱。跨度>
@PrabeshGouli 添加了一个示例。
您希望选项（“关键”、“高”、“中”和“低”）显示为互斥按钮？（在这种情况下，您可能会重复这个问题：stackoverflow.com/questions/5523735/…）
如果你使用button而不是div，button也有自己的值属性和句柄状态。再次抱歉，但我仍然对您的实际需求感到困惑。

标签： html css radio-button

【解决方案1】：

我建议您将此作为示例。我相信这正是您正在寻找的。p>

<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 Example 就是你要找的。p>

访问this blog了解更多信息。

【讨论】：