Jetons enfin un œil à 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 avec l'inspecteur DOM:
Et voici la même case à cocher sans style dans Chrome:
Vous pouvez voir la marge (orange); le rembourrage n'est pas présent (serait affiché en vert). Alors, quelle est cette pseudo-marge à droite et en bas de la case à cocher? Ce sont des parties de l'image utilisées pour la case à cocher . C'est pourquoi l'utilisation vertical-align: middle
ne suffit pas vraiment et c'est la source des problèmes entre les navigateurs.
Alors, que pouvons-nous faire à ce sujet?
Une option évidente est - remplacez les images! Heureusement, on peut le faire via CSS et remplacer ceux-ci par des images externes, des images base64 (en CSS), des svg en CSS ou simplement des pseudo-éléments. C'est une approche robuste (multi-navigateur!), Et voici un exemple d'un tel ajustement dérobé à 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 quelques articles plus approfondis sur un tel style comme certains répertoriés ici ; c'est hors de portée de cette réponse.
Ok, qu'en est-il encore de la solution sans images personnalisées ou pseudo-éléments?
TL; DR: cela ne fonctionnera pas, utilisez plutôt une case à cocher personnalisée
Tout d'abord, notons que si dans d'autres navigateurs ces pseudo-marges à l'intérieur de l'icône de case à cocher étaient arbitraires, il n'y avait pas de solution cohérente. Pour en construire une, nous devons explorer l'anatomie de ces images dans les navigateurs existants.
Alors, quels navigateurs ont les pseudo-marges dans les cases à cocher? J'ai vérifié Chrome 75, Vivaldi 2.5 (à base de chrome), FireFox 54 (ne demandez pas pourquoi un tel obsolète), IE 11, Edge 42, Safari ?? (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 également tous les navigateurs basés sur Chromium, comme Opera).
Quelle est la taille de ces pseudo-marges? Pour comprendre cela, 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 ~ 7% de largeur / hauteur et donc 0,9-1,0 px en unités absolues. La précision peut cependant être mise en doute: essayez différentes valeurs de zoom
pour la case à cocher. Dans mes tests dans Chrome et Vivaldi, la taille relative de la pseudo-marge est très différente aux 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 cela ne suffit pas. Les tailles des icônes des cases à cocher sont-elles les mêmes pour tous les navigateurs? Hélas! Voici ce que l'inspecteur DOM affiche pour les cases à cocher sans style:
- FireFox: 13,3 px
- À base de chrome: 12,8 pixels pour l'ensemble, donc 12,8 (100% - 14%) = 11 pixels pour ce qui est visuellement perçu comme une case à cocher
- IE 11, Edge: 13px
- Safari: n / a (ceux-ci devraient être comparés sur le même écran, je crois)
Avant de discuter de solutions ou d'astuces, demandons: qu'est-ce qu'un alignement correct ? Que voulons-nous atteindre? À un certain point, c'est une question de goût, mais en gros, je peux penser aux aspects "sympas" des alignements suivants:
texte et case à cocher sur la même ligne de base (je ne modifie délibérément pas la taille de la case à cocher ici):
ou avoir la même ligne médiane en termes de lettres minuscules:
ou même ligne médiane en termes de lettres majuscules (il est plus facile de voir la différence pour différentes tailles de 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 minuscules et majuscules).
Pour cette discussion, appelons un alignement agréable si la case à cocher est sur la même ligne de base que le texte et a la taille d'une lettre majuscule (un choix très discutable):
Maintenant, quels outils devons-nous:
- ajuster la taille de la case à cocher
- reconnaître Chromium avec sa case à cocher pseudo-margée et définir des styles spécifiques
- ajuster l'alignement vertical de la case à cocher / de l'étiquette
?
En ce qui concerne l' ajustement de la taille des cases à cocher : il y a width
, height
, size
, zoom
, scale
(ai - je raté quelque chose?). zoom
et scale
ne permettent pas de définir la taille absolue, ils peuvent donc aider uniquement à ajuster la taille du texte, pas définir la taille multi-navigateur (sauf si nous pouvons écrire des règles spécifiques au navigateur). size
ne fonctionne pas avec Chrome (est-ce que cela fonctionnait avec l'ancien IE? de toute façon, ce n'est pas si intéressant). width
et height
fonctionne dans Chrome et d'autres navigateurs, afin que nous puissions définir une taille commune, mais encore une fois, dans Chrome, il définit la taille de l'image entière, pas la case à cocher elle-même. Remarque: c'est le minimum (largeur, hauteur) qui définit la taille d'une case à cocher (si largeur ≠ hauteur, la zone en dehors du carré de case à cocher est ajoutée à la "pseudo-marge").
Une chose regrettable est que les pseudo-marges dans la case à cocher Chrome ne sont pas définies sur zéro pour toute largeur et hauteur, pour autant que je puisse voir.
Je crains qu'il n'y ait pas de méthode fiable uniquement en CSS de nos jours.
Considérons l'alignement vertical. vertical-align
ne peut pas donner de résultats cohérents lorsqu'il est défini sur middle
ou à baseline
cause 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 top
:
(sur l'image: alignement vertical: haut, bas et bas sans boîte-ombre)
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 (navigateurs à base de chrome), mais les autres navigateurs nécessitent une taille de case à cocher plus petite. Il semble impossible d'ajuster à la fois la taille et l'alignement vertical de manière à contourner la bizarrerie de l'image de la case à cocher de Chromium. Ma dernière suggestion est: utilisez plutôt des cases à cocher personnalisées - et vous éviterez la frustration :)