2011-12-16 5 views
7

Je souhaite personnaliser les boutons radio avec du code CSS pur, sans classes ni ID. Entrez simplement [type = radio]. Je souhaite utiliser une image d'arrière-plan pour la désélectionner et la sélectionner. Cependant, l'apparence -vendor: none; ne fonctionne pas avec Trident ou Gecko. Juste Webkit. Dans ces navigateurs, vous pouvez voir l'image d'arrière-plan comme arrière-plan du bouton radio mais le bouton est toujours là plutôt que d'afficher simplement l'image, comment puis-je me débarrasser du bouton afin que l'image d'arrière-plan s'affiche. Le violon: http://jsfiddle.net/7kScn/Style de bouton radio

Répondre

8

Vous pouvez utiliser une astuce de sélection CSS2 pour vous connecter à un groupe radio et afficher d'autres éléments immédiatement après.

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

Il est juste un exemple de base, mais il fonctionne sur le principe de cacher le champ de saisie, puis coiffer l'étiquette immédiatement après, lui donnant l'effet que c'est la chose réelle que vous vérifiez .

+0

CSS3? :(c'est un site de commerce électronique, aucune des fonctionnalités ne peut être basé sur CSS3 juste le style.Si il revient à afficher simplement les cases comme il le ferait normalement que c'est acceptable, mais si vous appelez 'display: none; Je ne peux pas vraiment l'utiliser – henryaaron

+0

Selon [ce tableau de compatibilité] (http://www.quirksmode.org/css/contents.html), ce sélecteur spécifique devrait fonctionner correctement dans son état actuel. (ces notes à propos de static pour IE7/8 n'affectent pas cette utilisation.) Il semble avoir été CSS2 (?). – animuson

+0

Mais mon site n'utilise pas d'étiquettes, comment cela fonctionnerait sans l'étiquette + – henryaaron

1

Est-ce utile? entrée [type = radio]: cochée { bordure: 1px noir uni; }

0

j'ai écrit un tutoriel sur la façon de personnaliser et radios avec cases à cocher CSS uniquement, ainsi que de créer interrupteurs marche/arrêt via styling l'étiquette et en utilisant son :before et :after pseudo-classes. Peut-être que cela aide :) Lisez-le ici: http://blog.felixhagspiel.de/index.php/posts/custom-inputs