html - CHROME html 单选框显示减号

Question

如果您在 chrome 中查看此代码，未选中的复选框显示为破折号，它们应该是空的，这是为什么？

HTML

<form>
<input type="radio" name="sex" value="male" >Red
<br>
<input type="radio" name="sex" value="female">Blue
<br>
<input type="radio" name="sex" value="female">Orange
<br>
<input type="radio" name="sex" value="female">Green
</form>

CSS

input[type="RADIO"] {
    -webkit-appearance: checkbox;
}

JSFIDDLE

Answer 1

您看到的行为符合规范。此行为遵循有关系统外观的 2004 系统外观功能规范。

这是因为 checkbox 可以有一个 indeterminate 状态，它只是可视的，因此不能通过 CSS 控制，但可以通过 Javascript 操作。现在，对于一组 radio ，任何时候只能检查一个。一旦检查了一个 radio ，其他 radio 就不会被检查。在此之前，如果未在标记中标记初始状态，则它们的状态为 indeterminate。

请参阅此 fiddle :http://jsfiddle.net/abhitalks/yp5551Lq/1/

您会注意到 input[type=checkbox] 可以有一个 indeterminate 状态，它在视觉上用 dash 表示。顺便说一句，似乎只有基于 webkit 的浏览器才支持它。 Firefox 和 IE 似乎忽略了 appearance 属性。

重要:对于样式为 checkbox 的 radio，这不能通过 Javascript 进行操作。这是因为，对于 radio 来说，至少有一个应该被 checked。除非发生这种情况，否则它将被设置为indeterminate。唯一的解决方案是在其中一个 radio 上设置 checked 属性。或者，您可以在同一组中隐藏一个额外的 radio ，其 checked 属性最初设置。

此规范存档于此:http://www.w3.org/wiki/User:Tantekelik/CR-css3-ui-20040511-appearance和来源引用:https://wiki.csswg.org/spec/css4-ui#appearance

规范说:

...a button that displays whether or not it is checked with a small box next to the button label. There may be an 'x' or check mark inside the box when the button is checked. An indeterminate (neither checked nor unchecked) state may be indicated with a dash '-' or a square or some other graphic in the box.

因此，基于 webkit 的浏览器使用 dash 来指示 indeterminate 状态。

片段:

var checkbox = document.getElementById("x");
checkbox.indeterminate = true;

input {
    display: inline-block;
    width: 24px; height: 24px;
}  
input[type="radio"] {
    -webkit-appearance: checkbox;
}

<input type="radio" name="sex" value="male" >Radio 1<br>
<input type="radio" name="sex" value="female">Radio 2<br>
<input type="radio" name="sex" value="female">Radio 3<br>
<input type="checkbox" id="y" name="y">Checkbox 1<br>
<input type="checkbox" id="x" name="x">Checkbox 2<br>

请注意，有趣的是，appearance 已从 CSS 4 规范中删除!