Comment aligner les cases à cocher et leurs libellés sur plusieurs navigateurs

StackOverflow https://stackoverflow.com/questions/306252

Question

C’est l’un des problèmes mineurs des CSS qui me tourmente constamment. Comment les personnes situées autour de Stack Overflow alignent-elles verticalement checkboxes et leur labels uniformément croix navigateur ? Chaque fois que je les aligne correctement dans Safari (en utilisant habituellement 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 perturbés. Je perds du temps à cela 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, les éléments de formulaire sont donc relativement propres. Dans l'attente des conseils ou astuces que vous avez à offrir!

Était-ce utile?

La solution

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

  1. Les entrées doivent figurer sur leur propre ligne.
  2. Les entrées de case à cocher doivent s'aligner verticalement avec le texte de l'étiquette de la même manière (si ce n'est pas identique) sur tous les navigateurs.
  3. Si le libellé de l'étiquette est renvoyé à la ligne, il doit être mis en retrait (par conséquent, il ne faut pas l'envelopper 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 telle qu'Eric Meyer qui ne remplace pas les marges et le remplissage de la forme (par conséquent, la réinitialisation des marges et du remplissage dans le CSS d'entrée). Évidemment, dans un environnement en direct, vous allez probablement imbriquer / remplacer des éléments pour prendre en charge d'autres éléments d'entrée, mais je voulais que les choses restent simples.

Choses à noter:

  • La déclaration *overflow est un hack IE intégré (le hack star-property). IE 6 et 7 le remarqueront, mais Safari et Firefox l'ignoreront correctement. Je pense que cela pourrait être valide CSS, mais vous êtes toujours mieux avec des commentaires conditionnels; vient de l'utiliser pour plus de simplicité.
  • Autant que je sache, la seule déclaration vertical-align cohérente sur tous les navigateurs était vertical-align: bottom. Définir ce paramètre, puis le placer relativement vers le haut, se comportait presque de manière identique dans Safari, Firefox et IE, avec seulement un pixel ou deux de divergence.
  • Le problème majeur du travail d’alignement est qu’IE laisse beaucoup d’espace mystérieux autour des éléments d’entrée. Ce n'est pas un rembourrage ou une marge, et c'est sacrément persistant. Définir une largeur et une hauteur dans la case à cocher, puis overflow: hidden pour une raison quelconque, réduit 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 devrez sans doute ajuster le positionnement relatif, la largeur, la hauteur, etc., pour que les choses se présentent bien.

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

Autres conseils

Parfois, l'alignement vertical a besoin de deux éléments en ligne (span, label, input, etc.) côte à côte 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 côte à côte sur la même ligne, mais nowrap signifie que l'intégralité du texte de l'étiquette reste toujours à côté de la case à cocher.

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

.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 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 très long texte d'étiquette qui doit être mis en place sans être placé sous la case à cocher, vous devez utiliser le remplissage et l'indentation du texte négatif sur les éléments de l'é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 for="x"><input type="checkbox" id="x" /> <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 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>

Utilisation de la solution One 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>

Rend pixel par pixel la même chose dans Safari (dont je me fie à la ligne de base) et Firefox et IE7 fonctionnent correctement. Cela 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 ...

Mise à jour: (Modification tierce)

La position bottom appropriée dépend de la famille et de la taille de la police! J'ai trouvé l'utilisation de bottom: .08em; pour la case à cocher & Amp; éléments radio est une bonne valeur générale. Je l'ai testé sous Chrome / Firefox / IE11 sous Windows avec Arial & Amp; Polices Calibri 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>

Une chose facile qui semble bien fonctionner est d’appliquer un ajustement de la position verticale de la case à cocher avec alignement vertical. Cela continuera à varier selon les navigateurs, mais la solution est simple. 

input {
    vertical-align: -2px;
}

Référence

essayez vertical-align: middle

aussi, votre code semble être comme il se doit: 

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

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

La seule solution qui fonctionne parfaitement pour moi est la suivante: 

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

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

J'utilise généralement la hauteur de ligne pour 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>

L’espoir que cela aide.

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

Mon code HTML est simplement: 

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

J'ai ensuite défini toutes les cases à cocher sur 24px pour la hauteur et la largeur. Pour aligner le texte, modifiez l'étiquette line-height et vertical-align: top; également et attribuez-lui vertical-align: bottom; comme suit:

EDIT: Après les tests IE, j'ai ajouté <=> à l'entrée et modifié le code CSS de l'étiquette. Vous constaterez peut-être que vous avez besoin d’un cas css IE conditionnel pour régler le remplissage - mais le texte et la zone 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;
}

Si quelqu'un trouve que cela ne fonctionne pas, merci de bien vouloir me le faire savoir. La voici en action (dans Chrome et IE - excuses car des captures d’écran ont été prises sur la rétine et utilisent des parallèles pour IE):

capture d'écran des cases à cocher: Chrome capture d'écran des cases à cocher: IE

Je pense que c'est le moyen le plus simple 

input {
    position: relative;
    top: 1px;
}
<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

Cela fonctionne bien pour moi: 

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}
<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

Je n'aime pas le positionnement relatif car cela rend l'élément rendu au-dessus de tout le reste de son niveau (il peut aller au-dessus de quelque chose si vous avez une présentation complexe).

J'ai découvert que vertical-align: sub rend les cases à cocher assez bien alignées dans Chrome, Firefox et Opera. Je ne peux pas vérifier Safari car je ne dispose pas de MacOS et que IE10 est légèrement désactivé, mais j’ai trouvé cette solution satisfaisante.

Une autre solution pourrait consister à essayer de créer des CSS spécifiques pour chaque navigateur et de les ajuster avec un alignement vertical dans% / pixels / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Maintenant que flexbox est pris en charge par tous les navigateurs modernes, cela me semble être une approche plus facile. 

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>


Voici la démo complète de la version préfixée: 

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}
<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Je n'ai jamais eu de problème à le faire comme ceci: 

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

Je voulais juste ajouter à la discussion sur l'attribut "pour" sur les étiquettes (légèrement décalé):

Veuillez le fournir, même si cela n’est pas nécessaire, car il est très pratique d’utiliser javascript: 

var label = ...
var input = document.getElementById(label.htmlFor);

C'est beaucoup plus pratique que d'essayer de déterminer si l'étiquette a une entrée imbriquée, ou si l'entrée est avant, ou après .. etc. Et il n'est jamais mauvais de la fournir .. donc.

Seulement mes 2 centimes.

Si vous utilisez Formulaires Web ASP.NET , vous n'avez pas à vous soucier des DIV, des autres éléments ou des tailles fixes. Nous pouvons aligner le <asp:CheckBoxList> texte en définissant float:left sur le type d'entrée CheckboxList dans CSS.

Veuillez vérifier l'exemple de code suivant: 

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

Code .ASPX: 

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

La réponse choisie, avec plus de 400 votes positifs, ne fonctionnait pas pour moi dans Chrome 28 OSX, probablement parce qu'elle n'avait pas été testée sous OSX ou qu'elle fonctionnait dans tout ce qui se passait en 2008 lorsque cette question a reçu une réponse.

Les temps ont changé et de nouvelles solutions CSS3 sont maintenant réalisables. Ma solution utilise pseudo-éléments pour créer une case à cocher personnalisée . Ainsi, les stipulations (avantages ou inconvénients, quelle que soit votre opinion) sont les suivantes:

  • Ne fonctionne que sur les navigateurs modernes (FF3.6 +, IE9 +, Chrome, Safari)
  • S'appuie sur une case à cocher personnalisée, qui sera rendue exactement de la même manière dans tous les navigateurs / systèmes d'exploitation. Ici, je viens de choisir des couleurs simples, mais vous pouvez toujours ajouter des dégradés linéaires, par exemple, pour lui donner plus de sens.
  • S'adapte à une police / taille de police donnée. Si vous la modifiez, il vous suffira de changer le positionnement et la taille de la case à cocher pour qu'elle apparaisse alignée verticalement. Si le réglage est correct, le résultat final devrait toujours être pratiquement identique dans tous les navigateurs / systèmes d'exploitation.
  • Pas de propriétés d'alignement vertical, pas de flotteurs
  • Doit utiliser le balisage fourni dans mon exemple, cela ne fonctionnera pas si la structure est la même que celle de la question. Cependant, la présentation aura essentiellement la même apparence. Si vous voulez déplacer des objets, vous devez également déplacer le CSS associé

Votre code HTML: 

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Votre CSS: 

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

Cette solution masque la case à cocher et ajoute des styles de pseudo-éléments à l'étiquette pour créer la case à cocher visible. Le libellé étant lié à la case à cocher masquée, le champ de saisie sera toujours mis à jour et la valeur sera soumise avec le formulaire.

jsFiddle: http://jsfiddle.net/SgXYY/6/

Et si cela vous intéresse, voici ma liste des boutons radio: http://jsfiddle.net/DtKrV / 2 /

J'espère que quelqu'un trouvera cela utile!

Si vous utilisez Twitter Bootstrap, vous pouvez simplement utiliser la classe checkbox sur le <label>: 

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

Codez en dur la hauteur et la largeur de la case à cocher, supprimez son remplissage et réglez sa hauteur plus les marges verticales sur la hauteur de ligne de l'étiquette. Si le texte de l'étiquette est en ligne, cochez la case. Firefox, Chrome et IE7 + rendent tous l'exemple suivant de manière identique: http://www.kornea.com/ css-checkbox-align 

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

L'astuce consiste à utiliser l'alignement vertical uniquement dans les cellules de tableau ou le bloc inline si vous utilisez une balise label.

Avec une case à cocher de type d’entrée enveloppée dans l’étiquette et flottant à gauche, comme suit: 

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

cela a fonctionné pour moi: 

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

Assurez-vous que la hauteur de est identique à la hauteur de ligne du (niveau de bloc). 

input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Voyons 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 surbrillance avec l'inspecteur DOM:

c'est juste un carré

Et voici la même case à cocher sans style dans Chrome:

c \

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? Il s'agit de parties de l'image utilisées pour la case à cocher . C’est pourquoi utiliser seulement vertical-align: middle ne suffit pas vraiment et c’est la source des problèmes rencontrés par tous les navigateurs.

Alors, que pouvons-nous faire à ce sujet?

Une option évidente est & # 8211; remplacez les images! Heureusement, on peut le faire via CSS et remplacer celles-ci par des images externes, des images base64 (in-CSS), in-CSS svg ou simplement des pseudo-éléments. Il s’agit d’une approche robuste (multi-navigateurs!). Voici un exemple de réglage 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 détaillés sur ce style, tels que certains répertoriés ; c'est hors de portée de cette réponse.

Bien, qu'en est-il de la solution sans images personnalisées ni pseudo-éléments?

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

Tout d'abord, remarquons 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 un, nous devons explorer l’anatomie de telles 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 si démodé), IE 11, Edge 42, Safari ?? (emprunté un pour une minute, oublié de vérifier la version). Seuls Chrome et Vivaldi possèdent 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 agrandie: 

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>

Mon résultat est ~ 7% de largeur / hauteur et donc de 0,9 à 1,0 pixel 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 sous Chrome et Vivaldi, la taille relative de la pseudo-marge est très différente à scale valeurs 10, 20 et aux valeurs 11-19 (??):

pour zoom = 10 c'est 7% alors que pour zoom = 11, c'est presque le double de cette valeur

width semble être plus cohérent: 

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}
input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

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

Maintenant que nous connaissons (?) la taille de la pseudo-marge, notons que cela ne suffit pas. La taille des icônes de case à cocher est-elle la même pour tous les navigateurs? Hélas! Voici ce que l'inspecteur DOM affiche pour les cases à cocher sans style:

  • FireFox: 13.3px
  • À base de chrome: 12,8 px pour l'ensemble, soit 12,8 (100% - 14%) = 11 px pour ce qui est perçu visuellement comme une case à cocher
  • IE 11, Edge: 13 pixels
  • Safari: n / a (ceux-ci doivent être comparés sur le même écran, je crois)

Maintenant, avant de discuter des solutions ou des astuces, demandons-nous: 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 à ce qui suit & "Nice &"; aspects des alignements:

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

entrer la description de l'image ici

ou avoir la même ligne médiane en minuscules:

entrer la description de l'image ici

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

entrer la description de l'image ici

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 de quelque chose d’autre (plus gros, plus petit ou entre minuscules et majuscules).

Pour cette discussion, appelons un alignement sympa si la case à cocher se trouve sur la même ligne de base que le texte et a la taille d'une lettre majuscule (un choix très discutable):

entrer la description de l'image ici

Maintenant, quels outils avons-nous pour:

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

?

  1. En ce qui concerne le réglage de la taille de la case à cocher : il existe height, size, vertical-align, middle, baseline (ai-je oublié quelque chose?). top et <=> ne permettent pas de définir une taille absolue. Ils peuvent donc uniquement aider à ajuster la taille du texte et non à définir la taille de plusieurs navigateurs (à moins que nous puissions écrire des règles spécifiques au navigateur). <=> ne fonctionne pas avec Chrome (a-t-il fonctionné avec le vieil IE? De toute façon, ce n'est pas si intéressant). <=> et <=> fonctionnent dans Chrome et d'autres navigateurs. Nous pouvons donc définir une taille commune. Toutefois, dans Chrome, il définit la taille de l'image entière et non la case à cocher elle-même. Remarque: c'est la taille minimale (largeur, hauteur) qui définit la taille d'une case à cocher (si width & # 8800; height, la zone située à l'extérieur de la case à cocher est ajoutée à & "Pseudo-marge &").

    Malheureusement, les cases à cocher pseudo-marges dans Chrome ne sont pas définies sur zéro, quelle que soit leur largeur et leur hauteur, à ma connaissance.

  2. Je crains qu'il n'existe pas de méthode CSS uniquement fiable.

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

    en comparant vertical-align: haut et bas

    (sur la photo: alignement vertical: haut, bas et bas sans ombre)

Alors, quel résultat avons-nous? 

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

L'extrait ci-dessus fonctionne avec Chrome (navigateurs basés sur Chromium), mais la taille de la case à cocher est réduite pour les autres navigateurs. Il semble impossible d'ajuster à la fois la taille et l'alignement vertical de manière à résoudre le problème d'image de la case à cocher de Chromium. Ma dernière suggestion est la suivante: utilisez plutôt des cases à cocher personnalisées & # 8211; et vous éviterez les frustrations:)

Je laisse généralement une case à cocher sans étiquette, puis je fais son " label " un élément séparé. C'est une douleur, mais il y a tellement de différences entre les navigateurs entre les affichages des cases à cocher et de leurs libellés (comme vous l'avez remarqué), c'est la seule façon pour moi de pouvoir contrôler l'apparence de tout.

Je finis également par le faire dans le développement de winforms, pour la même raison. Je pense que le problème fondamental du contrôle de case à cocher est qu’il s’agit vraiment de deux contrôles différents: la case et l’étiquette. En utilisant une case à cocher, vous laissez le implémenteur du contrôle décider de la façon dont ces deux éléments sont affichés l'un à côté de l'autre (et ils se trompent toujours, où faux = pas ce que vous voulez).

J'espère vraiment que quelqu'un aura une meilleure réponse à votre question.

CSS: 

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML: 

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

Le code ci-dessus placera les éléments de votre liste dans trois ordres de code et modifiera simplement les largeurs en conséquence.

Ce qui suit donne une cohérence parfaite entre les navigateurs, même IE9:

L’approche est assez judicieuse, au point d’être évidente:

  1. Créez une entrée et une étiquette.
  2. Affichez-les sous forme de bloc pour pouvoir les faire flotter à votre guise.
  3. Définissez la hauteur et la hauteur de ligne sur la même valeur pour qu'elles soient centrées et alignées verticalement.
  4. Pour les mesures em , le navigateur doit connaître la hauteur de la police de ces éléments et ne pas la définir elle-même. em mesures.

Il en résulte une règle générale applicable de manière globale: 

input, label {display:block;float:left;height:1em;line-height:1em;}

Adaptable à la taille de la police par formulaire, champs ou élément. 

#myform input, #myform label {font-size:20px;}

Testé dans les dernières versions de Chrome, Safari et Firefox sur Mac, Windows, Iphone et Android. Et IE9.

Cette méthode est probablement applicable à tous les types d'entrée ne dépassant pas une ligne de texte. Appliquez une règle de type à votre convenance.

Je sais donc que plusieurs réponses ont été données à cette question, mais j’estime que j’ai une solution beaucoup plus élégante que celles déjà fournies. Et pas seulement 1 solution élégante, mais 2 solutions distinctes pour chatouiller vos envies. Cela dit, tout ce que vous devez savoir et voir se trouve dans 2 JS Fiddle, avec des commentaires.

La solution n ° 1 s'appuie sur la & "Case à cocher &" native; du navigateur donné, bien qu'avec une torsion ... Son contenu dans un div qui est plus facile à positionner sur plusieurs navigateurs, avec un débordement: caché pour couper l'excès d'une case à cocher étirée de 1px (c'est pour que vous ne puissiez pas voir les frontières laides de FF)

HTML simple: (suivez le lien pour examiner le css avec des commentaires, le bloc de code sert à satisfaire le dépassement de pile) http://jsfiddle.net/KQghJ/ 

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

La solution n ° 2 utilise la " case à cocher bascule pirater & "; pour basculer l'état CSS d'une DIV, qui a été correctement positionnée sur le navigateur, et configurer avec un sprite simple pour la case à cocher États non cochés et cochés. Il suffit d’ajuster la position de l’arrière-plan avec la case à cocher Toggle Hack. Ceci, à mon avis, est la solution la plus élégante car vous avez plus de contrôle sur vos cases à cocher & Amp; radios et peuvent garantir la même apparence sur tous les navigateurs.

HTML simple: (suivez le lien pour passer en revue les CSS, le bloc de code servant à satisfaire StackOverflow) http://jsfiddle.net/Sx5M2/ 

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

Si quelqu'un n’est pas d’accord avec ces méthodes, laissez-moi un commentaire, j'aimerais avoir des commentaires sur les raisons pour lesquelles d’autres n’ont pas trouvé ces solutions, ou s’ils l’ont fait, pourquoi je ne vois aucune réponse à leur propos? Si quelqu'un voit une de ces méthodes échouer, ce serait bien de le voir aussi, mais celles-ci ont été testées dans les derniers navigateurs et s'appuient sur des méthodes HTML / CSS assez anciennes et universelles à ma connaissance.

Merci beaucoup! Cela aussi m'a rendu fou pour toujours.

Dans mon cas particulier, cela a fonctionné pour moi: 

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

J'utilise le fichier reset.css, ce qui pourrait expliquer certaines différences, mais cela semble bien fonctionner pour moi.

position: relative; présente quelques problèmes dans IE avec z-index et animations telles que slideUp / slideDown de jQuery.

CSS: 

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery: 

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

Le style a probablement besoin d'ajustements en fonction de la taille de la police utilisée dans <label>

PS:
J'utilise ie7js pour que les fichiers css fonctionnent dans IE6.

Utilisez simplement vertical-align: sub comme pokrishka déjà suggéré.

Fiddle

Code HTML: 

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

Code CSS: 

.checkboxes input {
    vertical-align: sub;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top