Maison > Article > interface Web > Comment définir la taille d'une case à cocher en HTML/CSS ?

Comment définir la taille d'une case à cocher en HTML/CSS ?

WBOYavant: 2023-08-30 11:37:131356parcourir

Comment définir la taille dune case à cocher en HTML/CSS ?

HTML, ou Hypertext Markup Language, est utilisé pour créer des pages Web et définir leur structure et leur contenu, et CSS est capable de les styliser. HTML comporte une variété d'éléments utilisés pour créer des pages Web, notamment des formulaires Web.

Les cases à cocher sont une partie importante des formulaires Web et des interfaces utilisateur. Utilisez des cases à cocher lorsque vous devez sélectionner plusieurs options. Par défaut, les cases à cocher en HTML sont petites, ce qui parfois ne répond pas aux exigences de conception. Cependant, la case à cocher peut être redimensionnée selon vos besoins à l'aide de CSS.

Qu'est-ce qu'une case à cocher ?

En HTML, une case à cocher est un élément de formulaire qui permet à l'utilisateur de sélectionner une ou plusieurs options dans une liste, représentée par une petite case. Les cases à cocher peuvent être cochées ou décochées, et l'état coché est indiqué par une coche ou une coche à l'intérieur de la case. Les cases à cocher sont également créées à l'aide de la balise HTML et en définissant l'attribut type sur checkbox. Par exemple -

<input type="checkbox" id="checkbox" name="checkbox" value="1">
<label for="checkbox-1">Checkbox 1</label>

Dans le code ci-dessus, nous avons créé une case à cocher avec l'ID, le nom et les attributs. L'attribut "for" sur l'élément label correspond à l'ID de la case à cocher.

Exemple 1

Voici un exemple de création d'une case à cocher en utilisant HTML.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
   </style>
</head>
<body>
   <h2>Create a Checkbox Using HTML</h2>
   <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1">
   <label for="checkbox-1">Option 1</label>
   <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2">
   <label for="checkbox-2">Option 2</label>
</body>
</html>

Définir la taille de la case à cocher

CSS est un outil puissant pour styliser les éléments HTML. Cela nous permet de changer la taille visuelle de la case à cocher. Nous pouvons utiliser les propriétés "width" et "height" pour définir la taille de la case à cocher. En utilisant le code CSS suivant, nous pouvons définir la largeur et la hauteur de la case à cocher −

input[type=checkbox] {
   width: 30px;
   height: 30px;
}

Le code ci-dessus définira la hauteur et la largeur de la case à cocher sur 30 pixels.

Exemple 2

Voici un exemple, en définissant la hauteur et la largeur de la case à cocher sur 30 pixels.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      input[type=checkbox] {
         width: 30px;
         height: 30px;
      }
   </style>
</head>
<body>
   <h2>Create a Checkbox Using HTML</h2>
   <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1">
   <label for="checkbox-1">Option 1</label>
   <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2">
   <label for="checkbox-2">Option 2</label>
</body>
</html>

Définir le style de la case à cocher

En plus de définir la taille des cases à cocher, leur apparence peut également être stylisée en CSS. CSS permet aux développeurs de modifier la taille visuelle des cases à cocher ainsi que de détecter les événements de clic sur les hitbox. Par exemple, nous pouvons utiliser le code CSS suivant pour styliser une case à cocher.

input[type=checkbox] {
   -webkit-appearance: none;
   width: 40px;
   height: 40px;
   background-color: red;
   border-radius: 5px;
   border: 3px solid lightgray;
   margin-right: 10px;
}
input[type=checkbox]:checked {
   background-color: lightgreen;
}

Dans le code CSS ci-dessus -

Display − inline-block ; Définissez l'attribut d'affichage sur inline-block.
width et height définissent la taille de la case à cocher.
background-color définit la couleur d'arrière-plan de la case à cocher.
Border-radius arrondit les bords de la case à cocher.
Propriété de bordureAjoutez une bordure et une couleur de bordure à la case à cocher.
Margin-right définit la distance entre la case à cocher et l'étiquette.
: Coché Le sélecteur de pseudo-classe est utilisé pour sélectionner l'état de la case à cocher.
Background-color change la couleur d'arrière-plan d'une case à cocher lorsque l'utilisateur la coche.

Exemple 3

Ceci est un exemple de code complet pour styliser une case à cocher.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      input[type=checkbox] {
         -webkit-appearance: none;
         display: inline-block;
         width: 40px;
         height: 40px;
         background-color: red;
         border-radius: 5px;
         border: 3px solid lightgray;
         margin-right: 10px;
      }
      input[type=checkbox]:checked {
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <h2>Create a Checkbox Using HTML</h2>
   <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1">
   <label for="checkbox-1">Option 1</label>
   <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2">
   <label for="checkbox-2">Option 2</label>
</body>
</html>

Conclusion

Ici, nous avons expliqué comment définir la taille des cases à cocher en HTML et CSS. La méthode HTML modifie uniquement la taille visuelle de la case à cocher, tandis que la méthode CSS permet aux développeurs de modifier également la case à cocher. En utilisant CSS, nous pouvons également styliser la case à cocher pour la rendre plus attrayante visuellement et plus conviviale.

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!

Déclaration：

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

Article précédent：La traduction chinoise de « balises HTML obsolètes » est « balises HTML obsolètes »Article suivant：La traduction chinoise de « balises HTML obsolètes » est « balises HTML obsolètes »

Articles Liés

Voir plus