我们的网站上有一个多项选择测验,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>
最佳答案
这有点 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>
关于javascript - 样式为 -webkit-appearance : checkbox: indeterminate state in Chrome 的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28181004/