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/
2 Comments
Marco Grazia
Febbraio 26, 2009 at 2:47 pmC’è solo il non piccolo problema che Internet Explorer, fino alla serie 6 (non so la 7) non vede questi selettori, quindi perdi completamente la formattazione con quel browser.
Dai un’occhiata a questa paginetta: http://www.gdesign.it/pages/howto/articoli/cssel/cssel.php è un po’ datata ma pur sempre valida.
m.
regolamento pesca
Settembre 13, 2013 at 2:24 pmDio come vi invidio !! non capisco una mazza di queste scritte, anche se sei stata molto chiara.
mica mi puoi dare una mano ? vorrei creare un altro sito ma dove l ho fatto questo gia mi hanno prosciugato le tasche !!