2011-12-16 29 views
7

Quiero dar estilo a los botones de opción con CSS puro, sin clases o ID. Simplemente ingrese [type = radio]. Quiero utilizar una imagen de fondo para no seleccionada y seleccionada. Sin embargo, the -vendor-appearance: none; no funciona con Trident o Gecko. Solo Webkit. En esos navegadores puede ver la imagen de fondo como fondo del botón de opción, pero el botón aún está allí en lugar de solo mostrar la imagen, ¿cómo puedo deshacerme del botón para que solo se muestre la imagen de fondo? El violín: http://jsfiddle.net/7kScn/Estilo de botón de radio

Respuesta

8

Puede usar un truco selector de CSS2 para conectarse a un grupo de radio y mostrar otras cosas inmediatamente después.

Ver: http://jsfiddle.net/7kScn/1/

Es sólo un ejemplo básico, pero opera en la premisa de ocultar el campo de entrada y luego peinar la etiqueta inmediatamente después de ella, dándole el sentido de que es la cosa real que se está comprobando .

+0

CSS3? :(es un sitio de comercio electrónico, ninguna de las funcionalidades puede basarse en CSS3, solo el estilo. Si se vuelve a mostrar las casillas de verificación normalmente, sería aceptable, pero si llama a 'display: none;' que Realmente no puedo usar eso. – henryaaron

+0

De acuerdo con [este cuadro de compatibilidad] (http://www.quirksmode.org/css/contents.html), este selector específico debería funcionar bien en su estado actual. No está soportado en IE6. (esas notas sobre estática para IE7/8 no afectan este uso). Parece haber sido CSS2 (?). – animuson

+0

Pero mi sitio no usa etiquetas, ¿cómo funcionaría sin la etiqueta + – henryaaron

1

¿Es esto de uso? entrada [tipo = radio]: marcado { borde: 1px negro sólido; }

0

escribí un tutorial sobre cómo personalizar casillas de verificación y radios con CSS única, así como crear interruptores de encendido/apagado a través de labrar la etiqueta y el uso es :before y :after pseudoclasses. Tal vez esto ayude :) Léalo aquí: http://blog.felixhagspiel.de/index.php/posts/custom-inputs