Maison > Article > interface Web > Comment aligner une case à cocher et son étiquette sur différents navigateurs en utilisant CSS ?

Comment aligner une case à cocher et son étiquette sur différents navigateurs en utilisant CSS ?

PHPzavant: 2023-08-27 10:49:02879parcourir

Les formulaires Web sont couramment utilisés dans les sites Web modernes. Pour les formulaires Web, nous avons un élément commun appelé cases à cocher. Cependant, l'alignement de ces cases et de leurs étiquettes dans différents navigateurs est une tâche difficile, car ils peuvent être affichés différemment dans. différents navigateurs et appareils. En ce qui concerne l'affichage des cases à cocher, différents navigateurs peuvent avoir des styles et des méthodes de rendu légèrement différents. Pour résoudre ce problème, nous discuterons de différentes façons d'aligner les cases à cocher avec leurs étiquettes en utilisant CSS sur plusieurs navigateurs.

Comment les cases à cocher sont-elles affichées dans les différents navigateurs ?

Différents navigateurs ont une compatibilité différente pour les cases à cocher dans les formulaires Web. Dans Internet Explorer, l'apparence des cases à cocher dépend de la version. Les anciennes versions ne prennent pas en charge les dernières fonctionnalités CSS, ce qui rend difficile l'alignement des cases à cocher et de leurs étiquettes. Il en va de même pour les versions de Mozilla Firefox et Safari.

Par conséquent, pour garantir un affichage cohérent et un alignement correct des cases à cocher et des étiquettes, nous devons utiliser des techniques de compatibilité entre navigateurs en CSS.

Remarque− Lors de la création de formulaires Web, il est généralement recommandé d'utiliser l'attribut for avec tout type d'élément d'entrée. Cela garantit que la case à cocher et son étiquette sont alignées. Assurez-vous toujours que la valeur de l'attribut for de est la même que la valeur de l'attribut id de .

Nous disposons de plusieurs techniques et pratiques CSS pour garantir un bon alignement des cases à cocher et des étiquettes sur différentes plateformes. Certains d’entre eux sont discutés ci-dessous.

Styliser les cases à cocher en utilisant l'alignement vertical

En utilisant les attributs display et vertical-align, nous pouvons aligner la case à cocher et son étiquette.

Exemple

Ici, l'attribut « display: inline-block » nous permet de définir le type d'affichage de la case à cocher sur inline-block. Et l'attribut « vertical-align: middle » alignera verticalement la case à cocher au centre de son conteneur.

L'utilisation conjointe de ces deux propriétés garantira que la case à cocher apparaît sur la même ligne que les autres éléments, alignés au milieu de la ligne. Par conséquent, la case à cocher et son étiquette seront alignées sur la même ligne, laissant le texte de l'étiquette centré avec la case à cocher.

<html>
<head>
   <style>
      input[type="checkbox"] {
         display: inline-block;
         vertical-align: middle;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h2> Checkbox </h2>
   <div class="container">
      <label for="demo">
      <input type="checkbox" id="demo"> Option 1 </label>
      <br>
      <label for="demo">
      <input type="checkbox" id="demo"> Option 2 </label>
   </div>
</body>
</html>

Utiliser CSS Flexbox

Nous pouvons utiliser l'élément comme conteneur flexible pour aligner les cases à cocher et les étiquettes.

Exemple

Dans cet exemple, nous utilisons display: flex pour faire de l'élément label un conteneur flex. La propriété align-items: center centre le texte de l'étiquette avec la case à cocher.

Bien que nous utilisions flex: none dans l'élément d'entrée pour garantir que la largeur de la case à cocher ne change pas lorsque la taille de l'étiquette (conteneur) change. Dans le même temps, l’utilisation de ces trois propriétés permet de centrer horizontalement la case à cocher et l’étiquette.

<html>
<head>
   <style>
      .container {
         display: flex;
         align-items: center;
         padding: 2px;
      }

      input[type=checkbox] {
         flex: none;
      }
   </style>
</head>
<body>
   <h2> Fruits </h2>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Mango </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Banana </label>
   </div>
</body>
</html>

Utiliser l'attribut d'alignement vertical

Les cases à cocher sont alignées par défaut sur la ligne de base du texte de l'étiquette dans certains navigateurs modernes. Cependant, pour garantir leur alignement correct, nous pouvons définir l'attribut vertical-align sur "top" pour les étiquettes et les éléments d'entrée.

Exemple

Dans l'exemple ci-dessous, nous utilisons l'attribut "display: inline-block" pour afficher l'étiquette (class="container") et les éléments d'entrée en tant qu'éléments de bloc en ligne. Cela rend les deux éléments en ligne et leur taille redimensionnable

"input[type="checkbox"]" est un sélecteur utilisé pour sélectionner ou faire correspondre le type de case à cocher de l'élément d'entrée.

De plus, nous avons utilisé l'attribut « vertical-align: top » pour aligner verticalement l'élément vers le haut de son conteneur. Utilisez ces propriétés pour définir à la fois l’étiquette et l’élément d’entrée afin qu’ils soient tous deux alignés verticalement en haut du conteneur et apparaissent en ligne l’un par rapport à l’autre.

<html>
<head>
   <style>
      .container {
         display: inline-block;
         vertical-align: top;
         margin-right: 15px;
         letter-spacing: 1px;
      }
      input[type="checkbox"] {
         display: inline-block;
         vertical-align: top;
      }
   </style>
</head>
<body>
   <h2> Programming Languages </h2>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> JavaScript </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Python </label>
   </div>
</body>
</html>

Utiliser les propriétés de position et d'alignement vertical

Conservez l'attribut position de l'élément d'entrée sur relative et utilisez l'attribut vertical-align: bottom pour aligner également les cases à cocher et les étiquettes.

Exemple

Ici, nous faisons de l'étiquette un élément de niveau bloc afin qu'elle occupe toute la largeur du conteneur. Supprime le padding et la margin de l'élément d'entrée. Utilisez l'attribut vertical-align: bottom pour aligner la case à cocher verticalement avec le bas du conteneur. Utilisez l'attribut position pour aligner la case à cocher avec l'étiquette.

<html>
<head>
   <style>
      CSS code * {
         padding: 0;
         margin: 0;
      }
      .container {
         display: block;
         padding-left: 20px;
      }
      input {
         width: 17px;
         height: 17px;
         vertical-align: bottom;
         position: relative;
         top: -1px;
      }
   </style>
</head>
<body>
   <h2> Programming Languages </h2>
   <br>
   <div>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> JavaScript </label>
      <br>
      <label for="demo" class="container">
      <input type="checkbox" id="demo"> Python </label>
   </div>
</body>
</html>

Conclusion

Les formulaires Web sont un élément fondamental du développement Web et sont couramment utilisés. Pour le rendre compatible avec tous les navigateurs, nous devons nous assurer que l'alignement des éléments d'entrée et d'étiquette est correct. Cela donne à votre site Web une apparence cohérente et professionnelle sur tous les navigateurs et appareils. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

firefox css safari for select checkbox using class this 外边距内边距 display position flex input

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment tester les propriétés CSS d'un élément à l'aide de Protractor ?Article suivant：Comment tester les propriétés CSS d'un élément à l'aide de Protractor ?

Articles Liés

Voir plus