Come stile A Form Label Con i CSS

February 1

Come stile A Form Label Con i CSS


Un elemento modulo che viene utilizzato per etichettare i vari campi e aree di immissione in un modulo pagina web è l'elemento etichetta. Si può essere uno stile utilizzando regole Cascading Style Sheet.

istruzione

1 Come stile A Form Label Con i CSS

Per lo stile gli elementi dell'etichetta il modo in cui appaiono nell'immagine nell'introduzione, è necessario utilizzare l'elemento dell'etichetta con l'attributo "per". Inoltre, è necessario chiudere l'elemento etichetta prima di aggiungere l'elemento "input" in sé. Il codice HTML per la forma completa in mostrato in figura.

2 Per lo stile gli elementi dell'etichetta, ho fatto le etichette vengono visualizzate come elementi a livello di blocco, che sono stati flottato a sinistra. Poi assegnata una larghezza alle etichette in modo che i campi di input sarebbero tutti una distanza uniforme dalle etichette. Ho assegnato un colore e fatto il testo in grassetto. Ho usato contenuti generati per aggiungere due punti (:) dopo l'etichetta. (I due punti non può essere visualizzato in tutti i browser.)

Ecco il CSS:

etichetta {

color: #B4886B;
font-weight: bold;
display: block;
width: 150px;
float: left;

}
Etichetta: after {content: ":"}

3 Solo per completezza ti anche mostrare il CSS utilizzato per lo stile fieldset, dal momento che gli elementi dell'etichetta sono racchiusi da un fieldset delimitato.

Ecco che i CSS:

fieldset {

border: 1px solid #CCA383;
width: 400px;
background: #FFE8EF;
padding: 3px;

}
leggenda fieldset {

background: #CCA383;
padding: 6px;
font-weight: bold;

}

4 Si potrebbe fare molte altre cose per lo stile degli elementi dell'etichetta. Il mio esempio è solo un modo per farlo.