CHROME html radio to checkbox showing minus sign

Question

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

Answer 1

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!