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

Essayez ma solution, je l'ai essayée dans IE 6, FF2 et Chrome et elle 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>

Answer 2

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

Answer 3

Je n'ai pas complètement testé ma solution, mais elle semble fonctionner parfaitement.

Mon HTML est simple :

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

J'ai ensuite réglé toutes les cases à cocher sur 24px pour la hauteur et la largeur. Pour que le texte soit aligné, je fais en sorte que l'étiquette ait la valeur line-height également 24px et attribuer vertical-align: top; comme ça :

EDIT : Après avoir testé IE, j'ai ajouté vertical-align: bottom; à l'entrée et modifié le CSS de l'étiquette. Il se peut que vous ayez besoin d'un cas de CSS IE conditionnel pour régler la question du remplissage, mais le texte et le cadre sont en ligne.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

Si quelqu'un trouve que cela ne fonctionne pas, veuillez me le faire savoir. Voici l'application en action (dans Chrome et IE - toutes mes excuses car les captures d'écran ont été faites sur la rétine et avec Parallels pour IE) :

Answer 4

J'utilise généralement la hauteur de ligne afin d'ajuster la position verticale de mon texte statique :

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

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

J'espère que cela vous aidera.

Answer 5

Examinons enfin la source du problème.

Les cases à cocher sont rendues à l'aide d'images (on peut en définir des personnalisées via CSS). Voici une case à cocher (non cochée) dans FireFox, mise en évidence par l'inspecteur DOM :

Et voici la même case à cocher non stylisée dans Chrome :

Vous pouvez voir la marge (orange) ; le padding n'est pas présent (il serait affiché en vert). Alors, quelle est cette pseudo-marge à droite et en bas de la case à cocher ? Voici des parties de l'image utilisée pour la case à cocher . C'est pourquoi utiliser seulement vertical-align: middle ne suffit pas vraiment et c'est la source des problèmes liés aux navigateurs croisés.

Alors, que pouvons-nous faire à ce sujet ?

Une option évidente est de remplacer les images ! Heureusement, on peut le faire via CSS et les remplacer par des images externes, des images base64 (in-CSS), des svg in-CSS ou simplement des pseudo-éléments. Il s'agit d'une approche robuste (multi-navigateurs !), et voici un exemple d'ajustement volé à cette question :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

Vous voudrez peut-être lire des articles plus approfondis sur ce type de stylisme, comme ceux énumérés ci-dessous. ici ; c'est hors du champ de cette réponse.

Ok, mais qu'en est-il de la solution "pas d'images ou de pseudo-éléments personnalisés" ?

TL;DR : il semble que cela ne fonctionnera pas, utilisez plutôt une case à cocher personnalisée.

Tout d'abord, notons que si dans les autres navigateurs, ces pseudo-marges à l'intérieur de l'icône de la case à cocher étaient arbitraires, il n'existait pas de solution cohérente. Pour en construire une, nous devons explorer l'anatomie de ces images dans les navigateurs existants.

Quels sont les navigateurs qui ont des pseudo-marges dans les cases à cocher ? J'ai vérifié Chrome 75, Vivaldi 2.5 (basé sur Chromium), FireFox 54 (ne demandez pas pourquoi il est si obsolète), IE 11, Edge 42, Safari ? ? (j'en ai emprunté un pour une minute, j'ai oublié de vérifier la version). Seuls Chrome et Vivaldi ont de telles pseudo-marges (je soupçonne tous les navigateurs basés sur Chromium également, comme Opera).

Quelle est la taille de ces pseudo-margeurs ? Pour le savoir, on peut utiliser une case à cocher zoomée :

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

mon résultat est de ~7% de la largeur/hauteur et donc 0.9-1.0px en unités absolues. La précision peut être remise en question, cependant : essayez différentes valeurs de zoom pour la case à cocher. Dans mes tests, tant dans Chrome que dans Vivaldi, la taille relative de la pseudo-marge est très différente à zoom valeurs 10, 20 et aux valeurs 11-19 ( ??):

scale semble être plus cohérent :

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

donc probablement ~14% et 2px sont les valeurs correctes.

Maintenant que nous connaissons ( ?) la taille de la pseudo-marge, notons que ce n'est pas suffisant. La taille des icônes des cases à cocher est-elle la même pour tous les navigateurs ? Hélas ! voici ce que montre DOM inspector pour les cases à cocher non stylisées :

• FireFox : 13.3px
• A base de chrome : 12,8px pour l'ensemble, d'où 12,8 (100 % - 14 %) = 1,5 million d'euros. 11px pour ce qui est perçu visuellement comme une case à cocher
• IE 11, Edge : 13px
• Safari : n/a (il faudrait les comparer sur le même écran, je crois)

Avant de parler de solutions ou d'astuces, posons la question suivante : qu'est-ce qu'une correct alignement ? Qu'essayons-nous d'atteindre ? Jusqu'à un certain point, c'est une question de goût, mais en gros, je peux penser aux aspects suivants des alignements "agréables" :

le texte et la case à cocher sur la même ligne de base (je ne règle délibérément pas la taille de la case à cocher ici) :

ou ont la même ligne médiane en termes de lettres minuscules :

ou la même ligne médiane en termes de majuscules (il est plus facile de voir la différence selon la taille de la police) :

et nous devons également décider si la taille de la case à cocher doit être égale à la hauteur d'une lettre minuscule, d'une lettre majuscule ou autre (plus grande, plus petite ou entre minuscule et majuscule).

Pour cette discussion, nous dirons que l'alignement est bon si la case à cocher est sur la même ligne de base que le texte et a la taille d'une majuscule (un choix très discutable) :

Maintenant, quels outils avons-nous pour :

1. ajuster la taille de la case à cocher
2. reconnaître Chromium avec sa case à cocher pseudo-marginée et définir des styles spécifiques
3. ajuster l'alignement vertical des cases à cocher/étiquettes

?

1. En ce qui concerne le ajustement de la taille des cases à cocher : il y a width , height , size , zoom , scale (ai-je manqué quelque chose ?). zoom et scale ne permettent pas de définir la taille absolue, ils ne peuvent donc aider qu'à ajuster la taille du texte, et non à définir la taille pour tous les navigateurs (à moins que nous puissions écrire des règles spécifiques aux navigateurs). size ne fonctionne pas avec Chrome (cela fonctionnait-il avec l'ancien IE ? de toute façon, ce n'est pas très intéressant). width et height fonctionnent dans Chrome et dans d'autres navigateurs, ce qui nous permet de définir une taille commune, mais là encore, dans Chrome, la taille de l'image entière est définie, et non celle de la case à cocher elle-même. Remarque : c'est minimum(width, height) qui définit la taille d'une case à cocher (si width != height, la zone située à l'extérieur du carré de la case à cocher est ajoutée à la "pseudo-marge").

   Malheureusement, les pseudo-marges de la case à cocher de Chrome ne sont pas mises à zéro, quelles que soient la largeur et la hauteur, d'après ce que je vois.

2. J'ai peur qu'il n'y ait pas de Méthode uniquement en CSS ces jours-ci.

3. Considérons l'alignement vertical. vertical-align ne peut pas donner de résultats cohérents lorsqu'il est réglé sur middle ou baseline en raison de la pseudo-marge de Chrome, la seule véritable option pour obtenir le même "système de coordonnées" pour tous les navigateurs est d'aligner l'étiquette et l'entrée sur l'élément top :

   

   (sur l'image : vertical-align : haut, bas et bas sans box-shadow)

Alors quel résultat en tirons-nous ?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

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

L'extrait ci-dessus fonctionne avec Chrome (les navigateurs basés sur Chromium), mais d'autres navigateurs exigent une taille plus petite de la case à cocher. Il semble impossible d'ajuster à la fois la taille et l'alignement vertical d'une manière qui permette de contourner la bizarrerie de l'image de la case à cocher de Chromium. Ma dernière suggestion est la suivante : utilisez plutôt des cases à cocher personnalisées - et vous éviterez toute frustration :)