HTML des boutons radio: masquer les balles
Je veux une forme particulière de la composante d'agir comme des boutons radio (une seule option peut être sélectionnée à la fois). Je ne veux pas la radio balles de montrer, cependant, le fait d'opter pour la variante de présentation des méthodes telles que la lumière de haute sélectionné, ou une autre méthode. Cela permettra de dégradation gracieuse: si le navigateur de l'utilisateur ne prend pas en charge Javascript, il sera juste de se dégrader à base de boutons radio. Je suis à masquer la balle boutons à l'aide de Javascript ou CSS. Quelqu'un sait comment? merci.
+1 pour faire "671" des "666" 🙂
OriginalL'auteur whamsicore | 2011-03-02
Vous devez vous connecter pour publier un commentaire.
Si je comprends bien, vous voulez des boutons radio, mais vous ne voulez pas les boutons eux-mêmes à apparaître. Gardez à l'esprit que de simplement enlever les boutons ne seront PAS fournir à l'utilisateur une expérience que vous recherchez. Vous avez besoin d'avoir une certaine forme de feedback de l'utilisateur.
Vous avez deux options:
1) ce Programme à l'aide de javascript /jquery. Avec cela à l'esprit, je vous suggère d'utiliser les boutons radio de départ à un espace réservé, puis l'utilisation de javascript (idéalement via un plugin jquery), qui retrace la page et remplacer les boutons cliquables divs et une évolution dynamique de champ caché.
2) Utiliser le CSS méta-classe de :vérifié qui, malheureusement, ne semble pas avoir de la croix-prise en charge du navigateur.
OriginalL'auteur slifty
J'ai une solution simple de travailler là où j'ai une étiquette entourant mes boutons radio avec une image représentant la chose:
J'ai ensuite appliqué les styles suivants:
Essentiellement, chaque
label
devient un régulier de la taille de la boîte qui est complètement rempli par unimg
. La radio elle-même est caché à l'aideopacity:0
. L'utilisateur peut dire ce qui est sélectionné commeimg
à côté de l'objet de la radio sera opaque, alors que les autres sont semi-transparents. Vous pourriez faire de divers autres types d'effets assez facilement.La chose que j'aime, c'est que la forme reste simple à traiter, il est juste un groupe de boutons radio.
J'ai utilisé l'opacité pour les boutons de la radio plutôt que de
display:none
ouvisibility:hidden
alors qu'ils sont encore dans le tabindex et la forme reste accessibles au clavier.l'idée d'utiliser l'opacité est génial!
OriginalL'auteur Rob Fletcher
Que le bout de cacher les boutons de la radio (sans perdre de l'accessibilité, bien sûr) peut être fait avec le CSS suivant:
À l'aide de
opacity: 0;
n'est pas l'idéal, en tant que le bouton est toujours là, prenant de la place dans la page. Le positionnement, c'est hors de vue est le chemin à parcourir.OriginalL'auteur aross
Allez - c'est raisonnable de supposer au moins une lecture de la familiarité avec jQuery dans ce contexte.
OriginalL'auteur Orbit
Alternativement, si votre navigateur le supporte (
querySelectorAll in document
)...OriginalL'auteur alex
Je ne pense pas que vous pouvez masquer à l'aide de css. Vous auriez à masquer les composants radiobutton et ensuite de remplacer la fonctionnalité avec JS. peut-être un choix de la liste de LIs de travail pour vous.
De l'jQuery UI Sélectionnable : http://jqueryui.com/demos/selectable/
OriginalL'auteur JohnP
vous pouvez le faire par l'ajout de ce style="list-style:none;"
OriginalL'auteur Steven Hammons
Il suffit d'insérer:
style="display:none;"
à l'intérieur de chaque
"<input type='radio'…>"
tag.Cela rend les balles invisibles, mais laisse les étiquettes montrant.
display
ànone
par JavaScript serait une option. P. S. downvote pas de moi.OriginalL'auteur Mark Choi