Je fais une entrée qui ressemble à ceci:
Il existe de nombreuses façons différentes d'aborder faire une telle contribution, mais j'essaie de Faites-le avec aussi peu de JavaScript que possible.
Les remplissages pour une réponse à la carte ressemblent beaucoup à un bouton radio sauf qu'ils ont leurs étiquettes à l'intérieur du bouton. Malheureusement, le bouton radio traditionnel ne fera que le faire.
Je cherche un moyen d'imiter le look d'une réponse couverte sans utiliser trop de JavaScript / JQuery / Crazy CSS. Toute suggestion?
juste pour clarifier: postmortem:
J'ai choisi la réponse que j'ai faite parce qu'elle a incorporé tout ce que je voulais. Pour les lecteurs de cette réponse, cela ne fonctionne pas bien dans IE7. J'ai décidé d'aller avec des sprites à la fin, mais la position de l'étiquette était une bonne idée et pourrait travailler dans IE8 / 9 (je suis sur un Mac et je n'ai pas de VMS pour eux pour le moment)
de
de
Voici ce que j'ai finalement fait HTML / CSS Wise.
Utilisé l'étiquette comme sélecteur et que JS modifie la couleur de fond:
3 Réponses :
Ceci est probablement aussi bon que possible sans aller à peu près personnalisé JavaScript:
http: // jsfiddle. NET / MU95N /
Seulement CSS mais vous êtes très limité dans ce que vous pouvez faire. Vous devriez voir à quel point il est difficile de le faire cross-navigateur, les choses peuvent ne pas aligner correctement. -
C'est assez incroyable. Pas 100% Sexy Regardant comme c'est le cas, mais avec quelques modifications, je suis sûr que cela pourrait être presque exact. Je vais tester le navigateur croisé.
@fuzzylla: pourquoi vous n'utilisez pas l'image CSS Sprite comme arrière-plan?
@Aserptik - Je pensais à cela, mais je voulais voir s'il y avait une manière plus procédurale.
Comme il s'agit d'un style de préréglage de bouton (être un bouton radio, je suis à peu près sûr que le système d'exploitation ou le navigateur définit la taille par défaut lorsque vous codez avec HTML) Je suis sûr que vous ne pourrez pas mettre de texte à l'intérieur de Un bouton radio utilisant HTML et CSS fonctionnent en conjonction. Cela dit, je suis allé chercher des boutons qui feraient ce que vous voulez. Naturellement, Google et de tels ont renvoyé beaucoup de résultats pour le faire via diverses méthodes, mais toutes impliquaient une langue de programmation autre que HTML et CSS seul.
La meilleure chose que j'ai trouvée était ce système de stylisme de bouton JQuery et CSS. jQuery accomplira Ce que vous voulez sortir des boutons et le CSS vous laissera la capacité de leur donner un joli look personnalisé.
Le code complet de la manière de créer le travail de trame pour les boutons est de la page, vous devrez naturellement la modifier pour que cela soit comme vous le souhaitez, mais j'espère que vous obtiendrez le démarrage.
Pourquoi ne pas utiliser CSS? Voici celui qui utilise JQuery et CSS ...
@fuzzyllama: gotcha ... Malheureusement, pas beaucoup de navigateurs soutiennent les boutons radio de style. Voir 456bereeStreet.com/lab/styling-form-controls- Revisited / ... Pour plus d'informations.
Pour être honnête, je ne peux pas penser à un moyen d'accomplir cela sans JavaScript / CSS, il n'y a pas de véritable installation HTML pour "Texte à l'intérieur du bouton radio". Y a-t-il une raison particulière de votre aversion à JQuery (et. Al)?
@ Waffle Paradox - Je ne suis pas contre l'utilisation de JavaScript / Jquery / CSS, je cherche juste quelque chose de plus léger que ce que je pense maintenant.
Utilisez des coins arrondis CSS3 pour faire un cercle?
Si vous enveloppez le texte à l'intérieur du bouton radio, comment sélectionnez-vous ce bouton ??
@David Nguyen - Quelle est la qualité de CSS3 avec IE?
@diecho - je veux que le texte soit faisant partie du bouton
En fait, cela ne peut pas être fait parce que vous voulez qu'il se comporte comme un bouton radio. à peu près sûr que vous aurez besoin de JavaScript afin de faire cela
Vous ne pouvez pas modifier la taille d'un bouton radio (taille du cercle) lui-même pour tous les navigateurs, seule la largeur / hauteur de commande. Bouton radio HTML standard L'apparence et la convivialité sont contrôlées par le système d'exploitation. Vous aurez donc besoin de faire des boutons personnalisés qui sont des cercles, puis de les mettre vraiment proches les uns des autres. Lorsque vous cliquez sur un, vous devez utiliser JQuery (ou un cadre JavaScript) pour modifier l'image sur l'image personnalisée afin qu'il apparaisse qu'il a été cliqué.