Bouton Radio Style

Je veux le style des boutons radio avec de la pure CSS, pas de classes ou Id. Juste input[type=radio].
Je veux utiliser une image d'arrière-plan pour les non sélectionnés et choisis.
Toutefois, le vendeur-apparence:none; ne fonctionne pas avec le Trident ou Gecko. Juste Webkit.
Dans ces navigateurs, vous pouvez voir l'image de fond comme arrière-plan du bouton radio mais le bouton est toujours là plutôt que de simplement l'affichage de l'image, comment puis-je me débarrasser du bouton donc, juste l'image de fond s'affiche. Le violon: http://jsfiddle.net/7kScn/

OriginalL'auteur henryaaron | 2011-12-16

  1. 8

    Vous pouvez utiliser un CSS2 sélecteur astuce pour se connecter à un groupe de radio et d'affichage autres choses immédiatement après.

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

    C'est juste un exemple de base, mais il fonctionne sur le principe de masquer le champ de saisie, puis le style de l'étiquette immédiatement après, en lui donnant l'effet que c'est la chose réelle, vous êtes arrivée.

    CSS3? 🙁 c'est un site de commerce électronique, aucune des fonctionnalités peut être basée sur CSS3 juste le style. Si elle tombe en arrière pour simplement afficher les cases à cocher comme il le ferait normalement que c'est acceptable, mais si vous appelez display:none; que je ne peux pas vraiment l'utiliser.
    Selon ce tableau de compatibilité, ce sélecteur doit fonctionner correctement dans son état actuel. C'est uniquement pris en charge dans IE6 (ces notes à propos de l'statique pour IE7/8 n'affectent pas cette utilisation de l'informatique). Il semble avoir été CSS2 (?).
    Mais mon site n'utilise pas les étiquettes, comment serait-il travailler sans le + étiquette
    Vous ne pouvez pas supprimer le réel de la boîte de avec CSS, qu'est ce que la radio/checkbox est. La seule autre solution serait d'utiliser JavaScript pour modifier le code HTML afin de rendre leur fantaisie.
    Viens de vérifier avec Adobe BrowserLab, travaille dans IE7 + dans IE6 chutes de retour à la norme de la visibilité. C'est très bien, maintenant, quels sont les étiquettes est-il une solution?

    OriginalL'auteur animuson

  2. 1

    Est-ce de l'utiliser?
    input[type=radio]:vérifié {
    border: 1px solid black;
    }

    OriginalL'auteur James Alarie

  3. 0

    J'ai écrit un tutoriel sur la façon de personnaliser les cases à cocher et les radios avec CSS, ainsi que de créer des boutons on/off via le style de l'étiquette et de l'aide c'est :before et :after pseudoclasses. Peut-être que cela aide 🙂 Lire ici: http://blog.felixhagspiel.de/index.php/posts/custom-inputs

    OriginalL'auteur Felix Hagspiel