web-dev-qa-db-fra.com

Cases à cocher CSS et boutons radio lorsque la saisie est à l'intérieur de l'étiquette?

J'ai longuement cherché ici une réponse à cette question, mais je n'ai pas encore trouvé ce que je cherchais. Trouvé ceci CSS - Comment styler une étiquette de boutons radio sélectionnés? mais la réponse impliquait de changer le balisage, et c’est quelque chose que je veux éviter et que j’expliquerai ci-dessous.

J'essaie d'ajouter des cases à cocher CSS3 personnalisées et des boutons radio à mon thème de forum XenForo, et tous les tutoriels que j'ai lus à ce sujet ont l'étiquette après l'entrée:

<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>

Cependant, dans le balisage 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é à savoir pourquoi, mais rien trouvé en rapport avec les cases à cocher/les boutons radio css personnalisés lorsque le balisage est ainsi effectué. Je souhaite éviter de modifier le balisage, car je traite ici d'un système de forum, ce qui impliquerait la modification de plusieurs modèles de base ... qu'il me faudrait ensuite mettre à jour le balisage à chaque fois que le logiciel du forum mettre à jour une mise à jour (en supposant que les modèles ont été modifiés).

J'ai essayé de créer des règles CSS qui fonctionneraient avec ce type de balisage, mais je n'ai pas réussi jusqu'à présent. Je n'ai pas beaucoup d'expérience en CSS, je n'ai pas mémorisé tous les sélecteurs, et les pseudo-classes me sont encore bien étrangères, alors j'espérais que quelqu'un ici pourrait nous éclairer si cela sera possible, et si pourrait aller à ce sujet. J'ai déjà mon Sprite prêt à partir, je dois juste comprendre le CSS.

Mon problème principal est que je ne peux pas comprendre comment sélectionner l'étiquette (seulement les étiquettes impliquées avec ces entrées bien sûr). Généralement quelque chose comme

input[type="checkbox"] + label

est utilisé, mais lorsque l'étiquette n'est pas postérieure à l'entrée, mais plutôt à l'extérieur/avant ... comment la sélectionner?

cssinputcheckboxradio-buttonlabel
30
Bob Loblaw

Si vous pouvez modifier le balisage pour envelopper le texte de l'étiquette, 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 réaliser quelques astuces 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 chose que l'autre solution, mais l'assemblage se fait sur la travée plutôt que sur l'étiquette.

12
Wesley Murch

Malheureusement, CSS n'autorise pas le style d'éléments parent basés sur des éléments enfants, ce qui serait un exemple simple:

div.a < div { border: solid 3px red; }

L'opposé de la sélection d'un enfant basé sur le parent:

div.a > div { border: solid 3px red; }

Ce que vous voulez faire peut être réalisé avec jQuery.

Départ ceci post.

3
agit

Question très intéressante. À vrai dire, je suis presque sûr que ce n’est tout simplement pas possible avec CSS seul.

Si l'attribut label (ctrl_enable_rte) est en quelque sorte structuré, il y a de l'espoir pour vous. Par exemple, si toutes les étiquettes de cases à cocher se terminent par rte, vous pouvez utiliser

label[for$=rte] { ... }

Si ce type de modèle n'existe pas et que les ID de case à cocher sont choisis de manière arbitraire, vous devrez recourir à JavaScript.

1
Madara Uchiha

IMHO meilleure façon de le faire sans gâcher avec HTML par PURE CSS est

 input[type="checkbox"] {
     position: relative;
     cursor: pointer;
     padding: 0;
     margin-right: 10px;
}
 input[type="checkbox"]:before {
     content: '';
     margin-right: 10px;
     display: inline-block;
     margin-top: -2px;
     width: 20px;
     height: 20px;
     background: #fcfcfc;
     border: 1px solid #aaa;
     border-radius: 2px;
}
 input[type="checkbox"]:hover:before {
     background: #f5821f;
}
 input[type="checkbox"]:focus:before {
     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
 input[type="checkbox"]:checked:before {
     background: #f5821f;
     border-color: #f5821f;
}
 input[type="checkbox"]:disabled {
     color: #b8b8b8;
     cursor: auto;
}
 input[type="checkbox"]:disabled:before {
     box-shadow: none;
     background: #ddd;
}
 input[type="checkbox"]:checked:after {
     content: '';
     position: absolute;
     left: 5px;
     top: 8px;
     background: white;
     width: 2px;
     height: 2px;
     box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
     transform: rotate(45deg);
}
0
Satsangpriyadas Swami