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系统外观功能规范中得出的.

这是因为a checkbox可以具有indeterminate仅视觉的状态,因此不能通过CSS控制,但可以通过Javascript进行操作.现在,对于一组无线电,任何时候都只能检查一个.检查一个无线电后,其他无线电将被取消选中.在此之前,如果初始状态未在标记中标记,则其状态为indeterminate.

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

你可以注意到一个input[type=checkbox]可以具有indeterminate由a直观表示的状态dash.顺便说一句,只有webkit基于浏览器似乎支持它.Firefox和IE似乎忽略了该appearance属性.

重要提示:对于radio样式checkbox,这不能通过Javascript操纵.这是因为,radio至少应该是一个checked.除非发生这种情况,否则它将被设计为indeterminate.唯一的解决方案是checked在其中一个无线电上设置属性.或者,您可以在同一组中拥有隐藏的额外无线电,并且checked最初设置其属性.

此规范存档于此处:http://www.w3.org/wiki/User:Tantekelik/CR-css3-ui-20040511-appearance 和Source Ref:https://wiki.csswg.org/spec/css4- UI外观#

规范说:

...一个按钮,显示是否使用按钮标签旁边的小方框进行检查.选中按钮时,框内可能会有"x"或复选标记.不确定(既未检查也未未检查)状态可以用方框中的" - "或方形或其他图形表示.

因此,webkit基于浏览器使用a 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规范中删除!