Comment styliser un label de formulaire avec CSS

Comment styliser un label de formulaire avec CSS. Un élément de formulaire utilisé pour étiqueter les divers champs et zones de saisie sur un formulaire de page Web est l'élément label. Il peut être stylisé en utilisant des règles de feuilles de style en cascade (CSS).

Étape 1 : Structure HTML

Pour styliser les éléments label comme ils apparaissent dans l'image de l'introduction, vous devez utiliser l'élément label avec l'attribut "for". De plus, vous devez fermer l'élément label avant d'ajouter l'élément "input" lui-même. Le HTML pour le formulaire complet est montré dans l'illustration.

Étape 2 : CSS pour les labels

Pour styliser les éléments label, j'ai fait en sorte que les labels s'affichent comme des éléments de niveau bloc, qui étaient flottés à gauche. Ensuite, j'ai attribué une largeur aux labels pour que les champs de saisie soient tous à une distance uniforme des labels. J'ai attribué une couleur et mis le texte en gras. J'ai utilisé du contenu généré pour ajouter un deux-points ( : ) après le label. (Le deux-points peut ne pas apparaître dans tous les navigateurs.)

Voici le CSS :

label { color: #B4886B; font-weight: bold; display: block; width: 150px; float: left; }
label:after { content: ": " }

Étape 3 : CSS pour le fieldset

Pour faire bonne mesure, je vais aussi vous montrer le CSS utilisé pour styliser le fieldset, puisque les éléments label sont enfermés par un fieldset bordé.

Voici ce CSS :

fieldset { border: 1px solid #CCA383; width: 400px; background: #FFE8EF; padding: 3px; }
fieldset legend { background: #CCA383; padding: 6px; font-weight: bold; }

Étape 4 : Autres possibilités

Vous pourriez faire beaucoup d'autres choses pour styliser les éléments label. Mon exemple n'est qu'une façon de le faire.