CHROME html收音机复选框显示减号 [英] CHROME html radio to checkbox showing minus sign

问题描述

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

HTML

 < form> 
< input type =radioname =sexvalue =male> Red 
< br> 
< input type =radioname =sexvalue =female>蓝色
< br> 
< input type =radioname =sexvalue =female> Orange 
< br> 
< input type =radioname =sexvalue =female>绿色
< / form> 
  

CSS

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

JSFIDDLE

解决方案

您看到的行为与规格一致。这种行为是从系统外观的2004系统外观功能规格开始的。

这是因为复选框可以有一个 indeterminate 状态，它只是可视化的，因此不能通过CSS控制，但可以通过Javascript进行操作。现在，对于一组收音机，任何时候只能检查一个。一旦选中了一个收音机，其他收音机就没有选中。在此之前，如果初始状态未在标记中标记，则其状态为 indeterminate 。

请参阅这个小提琴： http://jsfiddle.net/abhitalks/yp5551Lq/1/

您可以注意到输入[type = checkbox] 可以有一个不确定状态，它由 dash 可视化表示。顺便说一句，只有 webkit 的浏览器似乎支持它。 Firefox和IE似乎忽略了外观属性。

重要提示： 对于 radio 样式为复选框，这不能通过Javascript进行操作。这是因为，对于 radio s，至少有一个应该是 checked 。除非发生这种情况，否则将设为 indeterminate 。唯一的解决方案是在其中一个无线电设置选中的属性。或者，您可以在同一组中隐藏额外的广播，并且最初设置属性检查属性。

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

规范说：

...显示是否使用按钮标签旁边的小框
检查它的按钮。当按钮被选中时，在
框内可能有'x'或复选标记。一个不确定的（既不是检查
也不是未检查的）状态可能会在方框中用短划线' - '或方形或
表示其他图形。

因此，基于 webkit 的浏览器使用 dash 来表示 indeterminate 州。

摘要 ：

$ b

  var checkbox = document.getElementById（x）; checkbox.indeterminate = true;  

  input {display：inline-block;宽度：24px; height：24px;} input [type =radio] {-webkit-appearance：checkbox;}  

请注意有趣的是， appearance 正在从CSS 4规范中删除！  
If you look at this code in chrome, the unselected checkboxes show as dashes, they should be empty, why is this?

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
解决方案
The behaviour you are seeing is consistent with the specs. This behaviour is being following from the 2004 System Appearance feature spec on system appearance.

This is because a checkbox can have an indeterminate state which is visual only and hence not controlled via CSS but can be manipulated via Javascript. Now, for a group of radios, only one can be checked at any time. Once one radio is checked, the others are unchecked. Until that happens, if the initial state is not marked in the markup, then their state is indeterminate.

See this fiddle: http://jsfiddle.net/abhitalks/yp5551Lq/1/

You can notice that an input[type=checkbox] can have an indeterminate state which is visually represented by a dash. By the way, only webkit based browsers seem to support it. Firefox and IE seem to ignore the appearance property.

Important: For radio styled as checkbox, this cannot be manipulated via Javascript. This is because, for radios at least one is supposed to be checked. Unless, that happens it will be styled as indeterminate. The only solution for you is to set the checked attribute on one of the radios. Alternatively, you can have a hidden extra radio in the same group with its checked attribute set initially.

This spec is archived here: http://www.w3.org/wiki/User:Tantekelik/CR-css3-ui-20040511-appearance and the Source Ref: https://wiki.csswg.org/spec/css4-ui#appearance 

The spec says:

  
...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.
So, the webkit based browsers use a dash to indicate indeterminate state.

Snippet:



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>





Please note that interestingly, appearance is being dropped from the CSS 4 specs!

                        
这篇关于CHROME html收音机复选框显示减号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！