CHROME html 单选框显示减号答案

【问题标题】：CHROME html radio to checkbox showing minus signCHROME html 单选框显示减号
【发布时间】：2015-02-10 19:06:59
【问题描述】：

如果你在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

【问题讨论】：

在我的浏览器中看起来不错....
你一样... lubuntu 12.04 with google-chrome-stable
你能发个截图吗

标签： html css google-chrome checkbox

【解决方案1】：

要对此进行更改，您必须选择默认的无线电输入。
这里我选择了第一个输入：

<form>
<input type="radio" name="sex" value="male" checked="checked" >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>

【讨论】：

不，不想为验证目的预先选择

【解决方案2】：

您看到的行为与规范一致。此行为遵循 2004 System Appearance 系统外观功能规范。

这是因为checkbox 可以具有indeterminate 状态，该状态仅是可视的，因此无法通过 CSS 控制，但可以通过 Javascript 进行操作。现在，对于一组无线电，任何时候都只能检查一个。一旦一个收音机被选中，其他的就不会被选中。在此之前，如果初始状态未在标记中标记，则它们的状态为indeterminate。

看到这个小提琴：http://jsfiddle.net/abhitalks/yp5551Lq/1/

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

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

此规范存档在这里：http://www.w3.org/wiki/User:Tantekelik/CR-css3-ui-20040511-appearance 和源参考：https://wiki.csswg.org/spec/css4-ui#appearance

规范说：

...一个按钮，用一个小框显示是否选中按钮标签旁边。里面可能有一个“x”或复选标记选中按钮时的框。不确定的（未检查也不是未选中）状态可以用破折号“-”或正方形或框中的其他一些图形。

因此，基于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 规范中删除！

【讨论】：

是否可以使用 javascript 将其设置为 FALSE 或其他不确定的东西？
简单，如@zeee9 建议的那样，预先检查其中一台收音机。
@RafaTost：将其添加到答案中。

【解决方案3】：

您可以添加一个隐藏的单选按钮并选中它

<label><input type="radio" name="sex" value="1" >Male</label>
<label><input type="radio" name="sex" value="2">Female</label>
<input style="display: none;" type="radio" name="sex" value="0" checked>

【讨论】：