javascript - 样式为 -webkit-appearance : checkbox: indeterminate state in Chrome 的单选按钮

Question

我们的网站上有一个多项选择测验，Django 将表单吐出为单选按钮。做出此类决定的人希望单选按钮成为复选框，因此我们使用 webkit-appearance: checkbox; 来设置它们的样式。这在除 Chrome 之外的所有浏览器中看起来都不错。 Chrome 以不确定状态呈现复选框(中间有一条线)。

有没有办法告诉 Chrome 将它们呈现为未选中状态？

如果归结为它，我会在 Django 中自定义表单小部件，但现在我想在 CSS 或 JS 中进行。

注意:您可以在这里自己看到这种行为:

input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -ms-appearance: checkbox;     /* not currently supported */
    -o-appearance: checkbox;      /* not currently supported */
}

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

Answer 1

这有点 hack，但您可以添加一个隐藏的单选按钮，该按钮已选中。这将清除其他单选按钮的不确定状态:

input[type="radio"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  -ms-appearance: checkbox;     /* not currently supported */
  -o-appearance: checkbox;      /* not currently supported */
}

.hidden {
  display: none;
}

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
<input type="radio" name="radio" class="hidden" checked>