Comment coiffer la case à cocher Bootstrap personnalisée

Un bootstrap de framework CSS populaire permet aux développeurs de créer facilement et rapidement des applications Web prêtes à mobiles et réactives. Il dispose de centaines de classes CSS pré-conçues. Tout ce que vous avez à faire est d'ajouter la classe requise à l'élément particulier. Cependant, pour spécifier des styles personnalisés aux éléments, CSS peut être utilisé.

Cet article couvrira:

• Quel est l'élément HTML «»?
• Comment coiffer la case à cocher Bootstrap personnalisée?

Quel est l'élément HTML «»?

Dans HTML, le «"Élément avec le type"cocher»Crée une case à cocher sur la page Web. De plus, les cases à cocher permettent de vérifier plus d'une case à cocher à la fois.

Exemple

Avant de passer vers le sujet principal de ce post, voyons à quoi ressemble la case par défaut. Pour ce faire, ajoutez le «»Élément avec la légende et spécifiez le«"Élément avec le type"cocher"Et l'attribut"vérifié". Le "vérifié"Attribut avec la valeur"vérifié»Est utilisé pour cocher la case par défaut:

Style de cocher par défaut

Sortir

Comment coiffer la case à cocher Bootstrap personnalisée?

Pour faire la case à cocher personnalisée, essayez les étapes mentionnées ci-dessous:

Étape 1: Créez un fichier HTML

Tout d'abord, créez un fichier HTML en suivant les instructions suivantes:

• Ajouter un "”Élément avec le"P-4«Classes« conteneurs-fluid ».
• Ensuite, spécifiez l'en-tête à l'aide du «

  " élément.

• Ajouter trois ""Éléments et attribuez-leur la classe"vérifier sur mesure".
• À l'intérieur de "«Éléments, ajoutez le«”Élément avec le"taper"Valeur d'attribut"cocher". Seule la première entrée doit être associée au «vérifié" attribut.
• Enfin, mentionnez le «»Élément pour la coche.

Html

Sélectionnez le menu

Pizza



Burger



Frites

Les étapes ci-dessous doivent être mises en œuvre dans la section CSS.

Étape 2: Masquer la case à cocher par défaut

Comme nous devons créer une case à cocher personnalisée, il est nécessaire de le masquer. Pour ce faire, accédez au «vérifier sur mesure«Classe et appliquez les styles sur le«" éléments:

.Entrée sur mesure
Position: absolue;
Opacité: 0;

Ici:

• "position" avec le "absolu»La valeur définit la position de l'élément par rapport à son élément parent.
• "opacité"Avec la valeur"0"Cache le"" éléments.

Étape 3: Style la classe «vérifiez sur mesure»

.Vérifier sur mesure
taille de police: 22px;
Position: relative;
bloc de visualisation;
padding-gauche: 35px;
curseur: pointeur;
marge-fond: 12px;

L'explication des propriétés susmentionnées est discutée ci-dessous:

• "taille de police»La propriété définit la taille de la police de l'élément.
• "position" avec le "relatif”La valeur ajuste la position de l'élément correspondant à sa position actuelle.
• "afficher" avec le "bloc»La valeur donne la pleine largeur à l'étiquette.
• "rembourrage à gauche"Ajoute de l'espace à gauche du contenu de l'élément.
• "le curseur”Définit le style du pointeur de la souris.
• "marge-fond"Ajoute de l'espace au fond de l'élément.

Étape 4: Créez une case à cocher personnalisée

Pour faire la case à cocher personnalisée, ajoutez les propriétés CSS suivantes:

.coche
Position: absolue;
hauteur: 27px;
Largeur: 27px;
en haut: 0;
à gauche: 0;
Color en arrière-plan: RVB (233, 233, 233);
Border-Radius: 10px;

Ici:

• "Hauteur et largeur»Propriétés Définissez la taille de l'élément.
• "en haut "et" à gauche "avec" 0»Les valeurs ne spécifient aucun espace en haut et à gauche de l'élément.
• "Couleur de l'arrière plan»Détermine la couleur d'arrière-plan de l'élément.
• "rayon frontalier"Arrond les coins de l'élément.

On peut observer que les cases à cocher personnalisées ont été créées avec succès:

Étape 5: Style la case à cocher lors de la coche

Les propriétés CSS ci-dessous sont implémentées sur la case à cocher lorsqu'elle est cochée:

.Entrée sur mesure: vérifié ~.coche
Color d'arrière-plan: # 6202CF;
Border-Radius: 5px;

Jusqu'à présent, les cases à cocher sont conçues comme indiqué dans le GIF ci-dessous:

Maintenant, créons la coche dans les sections ci-dessous.

Étape 6: Créez la coche

Pour masquer la coche lorsqu'il n'est pas coché, implémentez les propriétés mentionnées ci-dessous:

.Camique: après
contenu: "";
Affichage: aucun;
Position: absolue;

Le ".Camique: après"Est mentionné pour accéder à la classe"Vérifiez »et«: après»Est une pseudo-classe, utilisée pour implémenter des styles après le contenu:

• "contenu»Spécifie le contenu inséré.
• "afficher"Avec la valeur"aucun»Cachent la coche.

Étape 7: Afficher la vérification lors de la vérification

Lorsque l'utilisateur vérifie la case, elle doit afficher la coche. Pour ce faire, la vérification est appliquée avec le CSS "afficher«Propriété avec la valeur»bloc»:

.Entrée sur mesure: vérifié ~.Camique: après
bloc de visualisation;

Étape 8: Style la coche

Voici les propriétés CSS pour créer la marque Tick:

.vérifier sur mesure .Camique: après
Gauche: 8px;
En haut: 5px;
Largeur: 9px;
hauteur: 14px;
Border: blanc solide;
largeur de bordure: 0 3px 3px 0;
transformée: rotation (45deg);

Selon le code donné:

• "gauche »et« top”Spécifiez l'espace sur les côtés gauche et supérieur de la marque de tic.
• "largeur et hauteur"Ajustez la zone de la marque de tick.
• "frontière”La propriété crée la marque de tick.
• "largeur de la bordure”La propriété spécifie les bordures du haut, de la droite, du bas et de la gauche. Ici, seules les propriétés droite et inférieure sont spécifiées.
• "transformer«Propriété avec la valeur»Rotation (45deg)”Tourne la marque de tic à 45 degrés.

Sortir

C'était tout sur la façon de styliser une case personnalisée à l'aide de bootstrap.

Conclusion

Pour styliser la case Bootstrap personnalisée, créez d'abord une page HTML. Ajouter le "" et ""Avec le type"cocher" éléments. Ensuite, plusieurs propriétés CSS sont utilisées pour les styliser. Plus précisément, pour faire la marque de tic, le CSS "frontière »et« largeur des frontières»Les propriétés sont utilisées. Ce message a expliqué comment styliser une case à cocher personnalisée dans Bootstrap.