Come stilizzare un'etichetta modulo con CSS

Come stilizzare un'etichetta modulo con CSS. Un elemento modulo usato per etichettare i vari campi e aree di input in un modulo web è l'elemento label. Può essere stilizzato usando regole Cascading Style Sheet.

Passaggio 1

Per stilizzare gli elementi label come appaiono nell'immagine nell'introduzione, devi usare l'elemento label con l'attributo "for". Inoltre, devi chiudere l'elemento label prima di aggiungere l'elemento "input" stesso. L'HTML per il modulo completo è mostrato nell'illustrazione.

Passaggio 2

Per stilizzare gli elementi label, ho fatto visualizzare le label come elementi a livello di blocco, flottati a sinistra. Poi ho assegnato una larghezza alle label in modo che i campi input fossero tutti a una distanza uniforme dalle label. Ho assegnato un colore e reso il testo in grassetto. Ho usato contenuto generato per aggiungere due punti ( : ) dopo la label. (I due punti potrebbero non apparire in ogni browser.)

Ecco il CSS:

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

Passaggio 3

Solo per completezza ti mostrerò anche il CSS usato per stilizzare il fieldset, poiché gli elementi label sono racchiusi da un fieldset con bordo.

Ecco quel CSS:

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

Passaggio 4

Potresti fare molte altre cose per stilizzare gli elementi label. Il mio esempio è solo un modo per farlo.