html - CSS:禁用自定义单选按钮

Question

我使用 css 创建了一个自定义单选按钮。但我对此有疑问。实际上，当选择单选按钮时，它被选中了。但我无法取消选择它。为了创建自定义单选按钮，我创建了这样的 css。

input[type="radio"]:checked:before {
content: "";
display: block;
position: relative;
top: 1px;
left: 0px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgb(255,196,0);
}

自定义单选按钮的 html 代码是这样的..

<div style="width:93%;height: 39px;">   
    <div style="padding-top: 10px;width: 70%;height: 32px"><input type="radio" style="width: 15px;height: 16px"/>Wednesday</div>
</div>

请帮我解决这个问题。任何帮助将不胜感激。

Answer 1

您必须提供另一个具有相同 name 属性的 radio button。当用户单击一个radio-button 时，它会被选中，而所有其他具有相同名称 的radio-button 将变为未选中状态

试试这个:

input[type="radio"]:checked:before {
content: "";
display: block;
position: relative;
top: 1px;
left: 0px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgb(255,196,0);
}

<div style="width:93%;height: 39px;">   
    <div style="padding-top: 10px;width: 70%;height: 32px">
      <input type="radio" name="day" style="width: 15px;height: 16px"/>Wednesday
      <input type="radio" name="day" style="width: 15px;height: 16px"/>Thursday
  </div>
</div>

编辑:

Radio buttons 当存在两个或多个相互排斥的选项列表并且用户必须恰好选择一个选项时使用。换句话说，单击未选中的单选按钮将取消选中列表中先前选中的任何其他按钮。

复选框 在存在选项列表并且用户可以选择任意数量的选项(包括零个、一个或多个)时使用。换句话说，每个 checkbox 都独立于列表中的所有其他 checkboxes，因此选中一个框不会取消选中其他框。