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

这有点像黑客攻击，但您可以添加一个隐藏的单选按钮，该按钮会被选中。这将清除其他单选按钮的不确定状态：

＆＃13;

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

＆＃13;

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

＆＃13;

单选按钮样式为-webkit-appearance：复选框：Chrome中的不确定状态

1 个答案: