CHROME html radio a la casilla que muestra el signo menos

Si miras este código en cromo, las casillas no seleccionadas se muestran como guiones, deberían estar vacías, ¿por qué?

HTML

Red
Blue
Orange
Green

CSS

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

JSFIDDLE

El comportamiento que está viendo es consistente con las especificaciones. Este comportamiento se está siguiendo desde la especificación de la característica Apariencia del sistema 2004 en la apariencia del sistema.

Esto se debe a que una checkbox puede tener un estado indeterminate que es solo visual y, por lo tanto, no controlado a través de CSS, pero puede ser manipulado a través de Javascript. Ahora, para un grupo de radios, solo se puede verificar una en cualquier momento. Una vez que se marca una radio, las demás se desactivan. Hasta que eso suceda, si el estado inicial no está marcado en el marcado, entonces su estado es indeterminate .

Vea este violín: http://jsfiddle.net/abhitalks/yp5551Lq/1/

Puede observar que una input[type=checkbox] puede tener un estado indeterminate que se representa visualmente mediante un dash . Por cierto, solo navegadores basados ​​en webkit parecen apoyarlo. Firefox y IE parecen ignorar la propiedad de appearance .

Importante: para radio estilo de radio como checkbox , esto no se puede manipular a través de Javascript. Esto se debe a que, para las radio se supone que se debe checked al menos una. A menos que eso suceda se diseñará como indeterminate . La única solución para usted es establecer el atributo checked en una de las radios. Alternativamente, puede tener una radio extra oculta en el mismo grupo con su atributo marcado inicialmente.

Esta especificación se archiva aquí: http://www.w3.org/wiki/User:Tantekelik/CR-css3-ui-20040511-apariencia y la fuente Ref: https://wiki.csswg.org/spec/css4- ui # apariencia

La especificación dice:

… un botón que muestra si está marcado o no con un pequeño recuadro al lado de la etiqueta del botón. Puede haber una “x” o marca de verificación dentro del cuadro cuando se marca el botón. Un estado indeterminado (ni marcado ni desmarcado) puede indicarse con un guión ‘-‘ o un cuadrado o algún otro gráfico en el recuadro.

Entonces, los navegadores basados ​​en webkit usan un dash para indicar un estado indeterminate .

Fragmento :

 var checkbox = document.getElementById("x"); checkbox.indeterminate = true; 
 input { display: inline-block; width: 24px; height: 24px; } input[type="radio"] { -webkit-appearance: checkbox; } 
 Radio 1
Radio 2
Radio 3
Checkbox 1
Checkbox 2

Puede agregar un botón de opción oculto y revisarlo

    

Para que esto cambie, debe seleccionar una entrada de radio predeterminada.
Aquí seleccioné la primera entrada:

 
Red
Blue
Orange
Green