Comment aligner les cases à cocher et leurs étiquettes de manière cohérente entre navigateurs ?

Question

C'est l'un des problèmes mineurs de CSS qui me tourmentent constamment.

Comment les gens de Stack Overflow s'alignent-ils verticalement ? checkboxes et leurs labels constamment multi-navigateurs ?

Chaque fois que je les aligne correctement dans Safari (généralement en utilisant vertical-align: baseline sur le input ), ils sont complètement éteints dans Firefox et IE.

Fixez-le dans Firefox, et Safari et IE sont inévitablement en désordre. Je perds du temps avec ça 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 généralement la réinitialisation d'Eric Meyer, de sorte que les éléments de formulaire sont relativement exempts de surcharges. J'attends avec impatience tous les conseils et astuces que vous pourrez me donner !

Answer 1

Attention ! Cette réponse est trop vieux et ne fonctionne pas sur les navigateurs modernes.

_{Je ne suis pas l'auteur de cette réponse, mais au moment où j'écris ces lignes, c'est de loin la réponse la plus votée, tant en votes positifs que négatifs (+1035 -17), et elle est toujours marquée comme réponse acceptée (probablement parce que l'auteur original de la question est celui qui a écrit cette réponse).}

Comme déjà noté de nombreuses fois dans les commentaires, cette réponse ne fonctionne plus sur la plupart des navigateurs (et semble échouer à le faire depuis 2013).

---

Après plus d'une heure d'ajustements, de tests et d'essais de différents styles de balises, je pense avoir trouvé une solution décente. Les exigences pour ce projet particulier étaient :

1. Les entrées doivent être sur leur propre ligne.
2. Les cases à cocher doivent être alignées verticalement avec le texte de l'étiquette de manière similaire (voire identique) dans tous les navigateurs.
3. Si le texte de l'étiquette s'enroule, il doit être indenté (pour ne pas s'enrouler sous la case à cocher).

Avant d'entrer dans les explications, 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 et le remplissage des formulaires (d'où l'intégration des réinitialisations de marge et de remplissage dans le CSS de l'entrée). Évidemment, dans un environnement réel, vous aurez probablement à imbriquer/supprimer des choses pour supporter d'autres éléments d'entrée, mais je voulais garder les choses simples.

Des choses à noter :

• Le site *overflow La déclaration est un hack IE en ligne (le hack de la propriété étoile). IE 6 et 7 le remarquent, mais Safari et Firefox l'ignorent. Je pense qu'il s'agit d'un CSS valide, mais il est préférable d'utiliser des commentaires conditionnels ; je l'ai utilisé pour des raisons de simplicité.
• D'après ce que je sais, le seul vertical-align La déclaration qui était cohérente sur tous les navigateurs était vertical-align: bottom . Ce réglage, puis le positionnement relatif vers le haut, se sont comportés de manière presque identique dans Safari, Firefox et IE, avec seulement un ou deux pixels d'écart.
• Le problème majeur lorsqu'on travaille avec l'alignement est qu'IE colle un tas d'espace mystérieux autour des éléments de saisie. Ce n'est ni un padding ni une marge, et c'est sacrément persistant. Définir une largeur et une hauteur pour la case à cocher, puis overflow: hidden Pour une raison quelconque, l'espace supplémentaire est supprimé et le positionnement d'IE est très similaire à celui de Safari et de Firefox.
• En fonction de la taille de votre texte, vous devrez sans doute ajuster le positionnement relatif, la largeur, la hauteur, etc. pour que tout soit parfait.

J'espère que cela aidera 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 n'hésitez pas à m'informer si vous trouvez quelque chose qui fonctionne plus régulièrement.

---

Attention ! Cette réponse est trop vieux et ne fonctionne pas sur les navigateurs modernes.

Answer 2

Parfois, vertical-align a besoin de deux éléments en ligne (span, label, input, etc...) situés l'un à côté de l'autre 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 très grande.

Ils flottent tous l'un à côté de l'autre sur la même ligne, mais le nowrap signifie que l'ensemble du texte de l'étiquette reste toujours à côté de la case à cocher.

L'inconvénient est l'ajout de balises SPAN sans signification.

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label><input type="checkbox"> <span>Label text x</span></label>
    <label><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

Maintenant, si vous aviez un très long texte d'étiquette qui nécessaire pour qu'il n'y ait pas d'enveloppement sous la case à cocher, il faut utiliser le remplissage et le retrait négatif du texte sur les éléments d'étiquette :

.checkboxes label {
  display: block;
  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><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

Answer 3

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

.font2 {font-family:Arial; font-size:32px} /* Sample font */

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>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Le rendu est le même, pixel par pixel, dans Safari (dont je fais confiance à la ligne de base) et dans Firefox et IE7. Cela fonctionne également pour différentes tailles de police d'étiquettes, grandes et petites. Maintenant, pour corriger la ligne de base d'IE sur les sélections et les entrées...

---

Mise à jour : (Third-Party Edit)

Le bon bottom la position dépend de la famille et de la taille de la police ! J'ai trouvé en utilisant bottom: .08em; pour les éléments checkbox et radio est une bonne valeur générale. Je l'ai testé dans Chrome/Firefox/IE11 sous Windows avec les polices Arial et Calibri en utilisant plusieurs tailles de police petites/moyennes/grandes.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

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

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Answer 4

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

input {
    vertical-align: -2px;
}

Référence

Answer 5

Essayez vertical-align: middle

Votre code semble aussi être le bon :

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