Question Comment aligner les cases à cocher et leurs étiquettes de manière cohérente avec les navigateurs croisés


C'est l'un des problèmes mineurs de CSS qui me harcèle constamment. Comment les gens autour de Stack Overflow alignent verticalement checkboxes et leur labels régulièrement navigateur croisé? Chaque fois que je les aligne correctement dans Safari (en utilisant généralement vertical-align: baseline sur le input), ils sont complètement désactivés dans Firefox et IE. Corrigez-le dans Firefox, et Safari et IE sont inévitablement foiré. Je perds du temps à chaque fois que je code un formulaire.

Voici le code standard avec lequel je travaille:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

J'utilise habituellement la réinitialisation d'Eric Meyer, donc les éléments de formulaire sont relativement propres des remplacements. Dans l'attente de tous les conseils ou astuces que vous avez à offrir!


1507


origine


Réponses:


Après plus d'une heure de peaufinage, de test et d'essai de différents styles de balisage, je pense que je pourrais avoir une solution décente. Les exigences pour ce projet particulier étaient:

  1. Les entrées doivent être sur leur propre ligne.
  2. Les entrées de case à cocher doivent s'aligner verticalement avec le texte d'étiquette de la même manière (si ce n'est pas identique) dans tous les navigateurs.
  3. Si le texte de l'étiquette enveloppe, il doit être indenté (donc ne pas envelopper sous la case à cocher).

Avant d'entrer dans une explication, je vais vous donner le code:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Voici l'exemple de travail dans JSFiddle.

Ce code suppose que vous utilisez une réinitialisation comme celle d'Eric Meyer qui ne remplace pas les marges d'entrée de formulaire et le remplissage (d'où la mise en place de réinitialisations de marge et de remplissage dans le CSS d'entrée). Évidemment, dans un environnement en direct, vous allez probablement imbriquer / surcharger des éléments pour prendre en charge d'autres éléments d'entrée, mais je voulais garder les choses simples.

Choses à noter:

  • le *overflow déclaration est un hack IE en ligne (le hack star-propriété). IE 6 et 7 le remarqueront, mais Safari et Firefox l'ignoreront correctement. Je pense que ce pourrait être un CSS valide, mais vous êtes encore mieux avec des commentaires conditionnels; Je l'ai juste utilisé pour la simplicité.
  • Comme je peux le dire, le seul vertical-align déclaration qui était cohérente entre les navigateurs était vertical-align: bottom. Fixer ceci et ensuite se positionner relativement vers le haut se comportait presque de la même manière dans Safari, Firefox et IE avec seulement un ou deux pixels de divergence.
  • Le problème majeur dans le travail avec l'alignement est que IE colle un tas d'espace mystérieux autour des éléments d'entrée. Ce n'est pas un rembourrage ou une marge, et c'est damné persistant. Définir une largeur et une hauteur sur la case à cocher, puis overflow: hidden pour une raison quelconque, supprime l'espace supplémentaire et permet au positionnement d'IE d'agir de manière très similaire à Safari et Firefox.
  • En fonction de la taille de votre texte, vous aurez sans doute besoin d'ajuster le positionnement relatif, la largeur, la hauteur, et ainsi de suite pour que les choses semblent bien.

J'espère que ceci aide quelqu'un d'autre! Je n'ai pas essayé cette technique spécifique sur d'autres projets que celui sur lequel je travaillais ce matin, alors arrêtez si vous trouvez quelque chose qui fonctionne de manière plus cohérente.


914



Parfois, l'alignement vertical nécessite deux éléments en ligne (span, label, input, etc ...) les uns à côté des autres pour fonctionner correctement. Les cases à cocher suivantes sont correctement centrées verticalement dans IE, Safari, FF et Chrome, même si la taille du texte est très petite ou grande.

Ils flottent tous les uns à côté des autres sur la même ligne, mais le "nowrap" signifie que tout le texte de l'étiquette reste toujours à côté de la case à cocher.

L'inconvénient est les tags SPAN supplémentaires sans signification.

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Maintenant, si vous avez un texte d'étiquette très long que nécessaire Pour renvoyer sans emballage sous la case à cocher, vous devez utiliser un remplissage et un retrait de texte négatif sur les éléments d'étiquette:

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>


170



Travailler hors de La solution d'un Crayon, J'ai quelque chose qui fonctionne pour moi et est plus simple:

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] {
  bottom: 2px;
}
<label>
  <input type="checkbox">
  Label text
</label>

Rend pixel par pixel la même chose dans Safari (dont je fais confiance à la ligne de base) et Firefox et IE7 sont aussi bons. Il fonctionne également pour différentes tailles de police d'étiquettes, grandes et petites. Maintenant, pour fixer la ligne de base d'IE sur les sélections et les entrées ...


155



Une chose facile qui semble bien fonctionner est d'appliquer un ajustement de la position verticale de la case à cocher avec l'alignement vertical. Cela variera encore d'un navigateur à l'autre, mais la solution n'est pas compliquée.

input {
    vertical-align: -2px;
}

Référence


117



essayer vertical-align: middle

aussi votre code semble devoir être:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>


77



Essayez ma solution, je l'ai essayé dans IE 6, FF2 et Chrome et il rend pixel par pixel dans les trois navigateurs.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>


36



La seule solution qui fonctionne parfaitement pour moi est:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Testé aujourd'hui dans Chrome, Firefox, Opera, IE 7 et 8. Exemple: Violon


24