paramètres de la case à cocher css

La case à cocher est l'un des éléments courants des pages Web et est souvent utilisée pour les opérations de sélection multiple ou unique des utilisateurs. Lors de l'utilisation de la case à cocher, nous devons souvent personnaliser son style pour mieux coopérer avec la page Web et obtenir une meilleure expérience utilisateur. Cet article explique comment implémenter des styles personnalisés de case à cocher via CSS.

1. À propos de CSS
CSS (Cascading Style Sheets) est un langage utilisé pour décrire les styles de documents (polices, couleurs, tailles, etc.). Il peut séparer la page HTML du code HTML et séparer la structure et le style de la page, permettant ainsi la réutilisation, l'unification et la maintenance du style.

2. Élément de case à cocher en HTML
Ce qui suit est l'élément de case à cocher le plus basique :

Apple

Dans cet exemple, nous avons une case à cocher L'élément nommé "fruit" est défini, sa valeur est "Apple" et le nom de la case à cocher est "Apple".

3. Comment définir le style de la case à cocher

En CSS, nous pouvons sélectionner des éléments de page via des sélecteurs de pseudo-classe tels que a:hover ou input[type=button]:active pour définir son style. Pour l'élément checkbox, nous pouvons également utiliser des sélecteurs de pseudo-classe pour personnaliser son style.

1. Définissez l'apparence de la case à cocher

input[type=checkbox] {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #c0c0c0;
outline: none;
apparence : aucune;
-webkit-apparence : aucune ;
-moz-apparence : aucune ;
}

Le code ci-dessus contient les attributs suivants :

largeur et hauteur : définissez la largeur et la hauteur de l'élément ; border-radius : définir l'élément Le rayon de la bordure de l'élément arrondit le bord de l'élément ;

border : définir le style de bordure de l'élément ;

outline : supprimer le contour extérieur de l'élément ; l'apparence de l'élément pour le rendre transparent ;

-webkit-looking et -moz-looking : adaptés aux différents noyaux de navigateur.

Après avoir configuré le code ci-dessus, nous pouvons donner à l'élément de case à cocher une forme circulaire au lieu de la boîte carrée traditionnelle.

2. Définir le style de statut pour la case à cocher

input[type="checkbox"]:checked + label {

background-color: #009688;

color: #fff;

}

En CSS, utilisez : pseudo-classe vérifiée les sélecteurs peuvent sélectionner les éléments de case à cocher sélectionnés. À l'aide de ce sélecteur, nous pouvons définir différentes couleurs ou images d'arrière-plan et d'autres styles pour l'élément de case à cocher sélectionné. Dans le code ci-dessus, le sélecteur "+" signifie sélectionner les éléments adjacents et est utilisé pour sélectionner l'étiquette adjacente après l'élément de case à cocher.

3. Définissez le style d'étiquette pour la case à cocher

label {

display: inline-block;

line-height: 20px;

margin-left: 10px;

}

L'étiquette d'étiquette en CSS est généralement utilisée pour fournir éléments du formulaire Texte de l'étiquette. Ici, nous pouvons faire apparaître le texte de l'étiquette comme un élément de bloc en définissant l'attribut d'affichage et en définissant la hauteur de ligne pour définir le style de centrage vertical du texte.

Ce qui précède est un moyen simple de personnaliser le style de la case à cocher via une feuille de style CSS. Bien entendu, nous pouvons également obtenir des styles plus libres et plus riches en définissant d'autres attributs, tels que le style de police, le style d'arrière-plan, etc.

4. Compatibilité

Avant CSS3, différents navigateurs avaient différents niveaux de prise en charge des styles personnalisés de cases à cocher, nous devons donc utiliser certaines méthodes de compatibilité pour obtenir l'unification et la compatibilité des styles.

1. Utiliser le plug-in jQuery

Le plug-in jQuery est un outil utilisé pour implémenter facilement l'interaction JavaScript sur les pages Web, ce qui nous permet d'obtenir une personnalisation et une compatibilité de style grâce à un code simple.

2. Utiliser bootstrap

Bootstrap est un ensemble de frameworks frontaux basés sur HTML, CSS et JS, principalement utilisés pour construire rapidement des sites Web et des applications Web modernes et réactifs. Dans le framework Bootstrap, nous pouvons facilement utiliser l'élément checkbox et n'avons pas besoin de trop de code CSS pour réaliser la personnalisation et la compatibilité du style.

5. Résumé

Cet article explique comment personnaliser le style de l'élément de case à cocher via CSS et fournit des méthodes de compatibilité adaptées aux différents cœurs de navigateur. Qu'il soit basé sur le plug-in jquery ou sur le framework Bootstrap, nous pouvons réaliser la personnalisation et la compatibilité du style de case à cocher grâce à un code simple. Dans le développement Web actuel, nous devons choisir des méthodes et des outils appropriés pour adapter et personnaliser les styles en fonction des besoins de projets spécifiques, afin que les utilisateurs puissent bénéficier d'une meilleure expérience Web.

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!