Css:Colorare i moduli con i selettori di attributo

Dopo aver visto come usare i primi due selettori di attributo, passo a spiegare come è possibile abbellire i moduli o le classiche form mail attraverso questi selettori, per la serie “far impazzire il povero utente ignaro!” :DD :DD

Lo faremo servendoci della selezione su valore di attributo esatto.

Abbiamo il nostro modulo con un campo di testo e la textarea:

Coloreremo con diversi colori il campo di testo,la textarea e i due bottoni Invia e Rispristina, ognuno avrà il suo colore senza appesantire il codice xhtml del documento che contiene il modulo. :))

Per fare questo dobbiamo solo associare una classe ai vari elementi e giocare con il foglio di stile.

Il primo ad essere formattato sarà il campo di testo che voglio fare rosa con doppio bordo e testo bianco.

Il css riporterà questa dicitura:

input[type=”text”]{
background-color: #FF99FF; /*sfondo rosa*/
border:3px double #E18CE8; /*bordo doppio largo 3px leggermente rosato*/
color: #FFFFFF; } /*colore testo dentro il campo bianco*/

Xhtml:

<input type=”text” name=”textfield” id=”textfield” />

Come si vede, nel documento non dovremo assegnare nessuna classe al tag input perchè automaticamente tutti i tag input con attributo type e valore text avranno lo sfondo rosa.

Così:

Adesso voglio la textarea blu con bordo nero. Per fare ciò nel css scriverò semplicemente questo:

textarea{
color: #FFCC00;/*colore di testo arancione, non il massimo ma…*/
background-color: #6699FF;/*sfondo celeste*/
border: 3px double #000033;/*Bordo doppio, nero di tre pixel*/

}

Xhtml:

<textarea name=”corpo” cols=”50″ rows=”10″ id=”corpo”></textarea>

E il risultato sarà ovviamente questo:

Trovo la mia form ancora troppo poco colorata 😀 , ho deciso che anche i tasti Invia e Ripristina abbiano le lettere colorate con una diversa tinta, un verde scuro per “invia” e rosso per il “ripristina”, quindi nel css scriverò questo:

input[type=”submit”]{
color: #336600;
}

Xhtml:

<input type=”submit” name=”invia” id=”invia” value=”Invia” />

Il bottone “ripristina”, come già detto, sarà rosso:

input[type=”reset”]{
color: #CC3300;
}

Xhtml:

<input type=”reset” name=”cancella” id=”cancella” value=”Ripristina” />

Il risultato sarà questo:

Tutta la form completa apparirà quindi così:

Una form così non è il massimo, va contro tutti i miei principi, ma per dimostrare la potenza e la bellezza dei selettori di attributo era il sogetto più adatto. :DD :DD

Attraverso la pseudoclasse :focus è possibile anche fare in modo che i campi si colorino con una diversa tinta quando il mouse ci clicca dentro, con :hover possiamo invece assegnare un altro colore quando il mouse ci passa sopra, proprio come un link! 😉
textarea:focus{

background-color: #000099;

}

textarea:hover{
background-color: #00FF33;
}

E’ possibile trovare l’esempio in funzione quì:

Formattare colori campi moduli con css e selettori di attributo

/happy/