CHROME html radio for flag showing minus sign

Question

If you look at this code in chrome, then unselected flags are shown 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

Answer 1

The behavior you see conforms to the specification. This behavior follows the specification of the System Appearance 2004 function for the appearance of the system.

This is because the checkbox may have an indeterminate state that is visual and therefore not controlled by CSS, but can be controlled via Javascript. Now, for a group of radio stations, only one can be checked at any time. As soon as one radio is checked, the rest are uncontrollable. Until this happens, if the initial state is not marked in the markup, then their state is indeterminate .

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

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

Important: For radio designated as checkbox , Javascript cannot be manipulated. This is because for radio , at least one must be checked . If this does not happen, then it will be framed as indeterminate . The only solution for you is to set the checked attribute on one of the radio stations. In addition, you can have a hidden auxiliary radio station in the same group with your checked attribute set at the beginning.

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

The spectrum says:

... a button that displays whether it is checked using a small window next to the button’s label. There may be an “x” or a checkmark inside the box when the button is checked. An indefinite (neither verified or uncontrolled) state can be indicated by a dash '-' or a square or some other graphs in the field.

So, webkit based browsers use dash to indicate indeterminate status.

Excerpt

 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> 

Note that interestingly, appearance excluded from the CSS 4 specs!

Answer 2

You can add a hidden radio button and check it.

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

Answer 3

For this to change, you need to select the default radio input.
Here I selected the first input:

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