Cases à cocher CSS et boutons radio lorsque l'entrée est à l'intérieur de l'étiquette?
j'ai beaucoup cherché ici pour trouver une réponse à cela, mais je n'ai pas tout à fait trouvé ce que je cherche. Trouvé ce CSS - comment styliser une étiquette de boutons de Radio choisie? mais la réponse impliquait de changer la majoration, et c'est quelque chose que je veux éviter que je vais expliquer ci-dessous.
j'essaie d'ajouter des cases à cocher personnalisées css3 et des boutons radio à mon thème de forum XenForo, et tous les tutoriels que j'ai lus sur ce ont l'étiquette après le entrée:
<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>
cependant dans le markup de XenForo l'entrée est à l'intérieur de l'étiquette:
<label for="ctrl_enable_rte">
<input type="checkbox" name="enable_rte" value="1" id="ctrl_enable_rte" {xen:checked "{$visitor.enable_rte}"} />
{xen:phrase use_rich_text_editor_to_create_and_edit_messages}
</label>
j'ai cherché pourquoi, mais je n'ai rien trouvé concernant les cases à cocher/boutons radio CSS personnalisés quand le balisage est de cette façon. Je veux éviter d'avoir à changer le markup, parce que j'ai affaire à un système de forum ici, et cela impliquerait l'édition d'un tas de gabarits de base... que je devrais alors mettre à jour le markup sur chaque fois que le forum le logiciel a publié une mise à jour (présumant que les modèles ont changé).
j'ai essayé de créer des règles CSS qui fonctionneraient avec ce type de markup, mais jusqu'à présent j'ai échoué. Je n'ai pas trop d'expérience avec les CSS, Je n'ai pas tous les sélecteurs mémorisés, et les pseudo-classes sont encore assez étrangères à moi, donc j'espérais que quelqu'un ici pourrait nous éclairer sur si cela sera possible, et si oui, comment je pourrais m'y prendre. J'ai déjà mon sprite prêt à aller, j'ai juste besoin de comprendre le CSS.
mon principal problème est que je ne peux pas comprendre comment sélectionner l'étiquette (seulement les étiquettes impliquées avec ces entrées bien sûr). Habituellement quelque chose comme
input[type="checkbox"] + label
est utilisé, mais lorsque l'étiquette n'est pas après l'entrée et au lieu de l'extérieur/à l'avant... comment puis-je sélectionner?
3 réponses
si vous pouvez éditer le markup pour envelopper le texte de l'étiquette réelle, par exemple:
<label>
<input type="checkbox">
<span>One</span>
</label>
<label>
<input type="checkbox">
<span>Two</span>
</label>
<label>
<input type="checkbox" disabled>
<span>Three</span>
</label>
vous pouvez tirer quelques trucs avec CSS:
label {
position:relative;
cursor:pointer;
}
label [type="checkbox"] {
display:none; /* use your custom sprites instead as background on the span */
}
[type="checkbox"] + span {
display:inline-block;
padding:1em;
}
:checked + span {
background:#0f0;
}
[type="checkbox"][disabled] + span {
background:#f00;
}
Démo: http://jsfiddle.net/dMhDM/1 /
gardez à l'esprit que cela échouera si le navigateur ne supporte pas :checked .
c'est fondamentalement la même solution que l'autre, mais la pose se fait sur la portée plutôt que l'étiquette.
malheureusement CSS ne permet pas le style des éléments de parent basé sur des éléments d'enfant qui serait l'exemple de la manière facile:
div.a < div { border: solid 3px red; }
à L'opposé de la sélection d'un enfant en fonction de parent:
div.a > div { border: solid 3px red; }
ce que vous voulez faire peut être réalisé en utilisant jQuery.
Check out ce après.
question très intéressante. À vrai dire, je suis presque sûr que ce n'est pas possible avec CSS seul.
S'il y a une sorte de motif dans l'étiquette pour l'attribut ( ctrl_enable_rte ), il y a de l'espoir pour vous. Par exemple, si toutes les étiquettes de case à cocher se terminent par rte , vous pouvez utiliser
label[for$=rte] { ... }
s'il n'y a pas de tel modèle, et que les ID de case à cocher sont choisis arbitrairement, vous devrez utiliser JavaScript.