CHROM html Radio zu Kontrollkästchen mit Minuszeichen

Question

Wenn Sie diesen Code in Chrom, die nicht ausgewählten Kontrollkästchen als Bindestriche angezeigt, sollten sie leer sein, warum ist das?

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

Das Verhalten, das Sie steht im Einklang mit den Spezifikationen sehen. Dieses Verhalten wird von der System Appearance-Feature 2004-Spezifikation für das System aussehen.

Das ist, weil ein checkbox einen Zustand haben kann, der nur visuell ist und folglich nicht über CSS gesteuert wird, aber über Javascript manipuliert werden kann. Nun kann für eine Gruppe von Funkgeräten immer nur eine überprüft werden. Sobald ein Radio aktiviert ist, sind die anderen deaktiviert. Bis das passiert, wenn der Anfangszustand nicht im Markup markiert ist, ist ihr Zustand indeterminate.

Sehen Sie diese Geige: http://jsfiddle.net/abhitalks/yp5551Lq/1/

Sie bemerken, dass ein input[type=checkbox] einen indeterminate Zustand aufweisen kann, die optisch durch eine dash dargestellt. By the way, nur webkit basierte Browser scheinen es zu unterstützen. Firefox und IE scheinen die appearance Eigenschaft zu ignorieren.

Wichtig: Für radio als checkbox gestylt, kann dies nicht über Javascript manipuliert werden. Dies liegt daran, dass für radio s mindestens eins checked sein soll. Es sei denn, es passiert, dass als indeterminate gestylt wird. Die einzige Lösung für Sie besteht darin, das Attribut checked auf einem der Funkgeräte zu setzen. Alternativ können Sie ein verstecktes zusätzliches Radio in der gleichen Gruppe mit seinem checked zuerst gesetzten Attribut haben.

Diese Spezifikation wird hier archiviert: http://www.w3.org/wiki/User:Tantekelik/CR-css3-ui-20040511-appearance und die Quelle Ref: https://wiki.csswg.org/spec/css4-ui#appearance

Die Spezifikation sagt:

... eine Schaltfläche, die anzeigt, ob es mit einer kleinen Box nächsten geprüft zu der Schaltfläche Etikett. Es kann ein "x" oder ein Häkchen in die Box sein, wenn die Schaltfläche aktiviert ist. Ein unbestimmter (weder überprüfter noch ungeprüfter) Zustand kann durch einen Strich '-' oder ein Quadrat oder eine andere Grafik in der Box angezeigt werden.

Also, der webkit basierte Browser verwenden, um ein dashindeterminate Zustand anzuzeigen.

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>

Bitte, dass interessanterweise beachten, appearance von der CSS fiel 4 specs wird!

Answer 2

Dazu müssen Sie ändern, um einen Standard-Radio-Eingang auszuwählen.
Hier habe ich den ersten Eingang:

<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> 

Answer 3

Sie können einen versteckten Radio-Button hinzufügen und überprüfen es

<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>