Comment styliser une étiquette de formulaire avec CSS

Comment styliser une étiquette de formulaire avec CSS. L'élément label est un élément de formulaire utilisé pour étiqueter les différents champs et zones de saisie d'un formulaire de page Web. Il peut être stylisé à l'aide des règles de feuille de style en cascade.

Étape 1

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

Étape 2

Pour styliser les éléments d'étiquette, j'ai fait en sorte que les étiquettes s'affichent sous forme d'éléments de niveau bloc, qui flottaient vers la gauche. Ensuite, j'ai attribué une largeur aux étiquettes afin que les champs de saisie soient tous à une distance uniforme des étiquettes. J'ai attribué une couleur et mis le texte en gras. J'ai utilisé le contenu généré pour ajouter deux points ( :) après l'étiquette. (Les deux-points peuvent ne pas apparaître dans tous les navigateurs.)

Voici le CSS :

étiquette { couleur :#B4886B ; font-weight :gras ; bloc de visualisation; largeur :150 pixels ; flotteur :gauche ; } label :après { contenu :" :" }

Étape 3

Pour être complet, je vais également vous montrer le CSS utilisé pour styliser l'ensemble de champs, puisque les éléments d'étiquette sont entourés d'un ensemble de champs bordé.

Voici ce CSS :

ensemble de champs { bordure :1px solide #CCA383 ; largeur :400 pixels ; arrière-plan :#FFE8EF ; rembourrage :3px; } légende du jeu de champs { arrière-plan :#CCA383 ; rembourrage :6px; font-weight :gras ; }

Étape 4

Vous pouvez faire beaucoup d'autres choses pour styliser les éléments d'étiquette. Mon exemple n'est qu'une façon de procéder.