• CHI SONO
    • Status
  • Business Improv
  • Comunicazione
    • CNV
  • eBook
  • VENDITA
    • Il venditore sociopatico
    • Gestione del cliente
  • WordPress
    • Pillole WordPress
    • Temi per WordPress
      • Avada
  • Web Jungle
Pikadilly – Blog per smanettoni in via di sviluppo
Pikadilly - Blog per smanettoni in via di sviluppo
  • CHI SONO
    • Status
  • Business Improv
  • Comunicazione
    • CNV
  • eBook
  • VENDITA
    • Il venditore sociopatico
    • Gestione del cliente
  • WordPress
    • Pillole WordPress
    • Temi per WordPress
      • Avada
  • Web Jungle
Home
Risorse
Css

Css:Colorare i moduli con i selettori di attributo

Maggio 5th, 2008 Pikadilly Css 2 comments

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:

Modulo vuoto

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ì:

campo text colorato

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:

textarea

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:

bottoni

Tutta la form completa apparirà quindi così:

Form finale

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/

Facebook Twitter

2 Comments

  1. Marco Grazia
    Febbraio 26, 2009 at 2:47 pm

    C’è 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.

  2. regolamento pesca
    Settembre 13, 2013 at 2:24 pm

    Dio 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 !!

Chi sono

Mi chiamo Francesca L. Luciani, sono una consulente di comunicazione politica e di comunicazione teatrale. Nel tempo libero sono una mezza sega.

Ultimi post

Apr 18th 10:11 AM
Comunicazione

SMM di INPS blasta gli utenti: può farlo?

Mar 18th 11:09 AM
Comunicazione

Commenti: sono sempre necessari?

Ott 3rd 10:46 AM
Comunicazione

Come evitare di autoflagellarti quando la gente non legge

Giu 6th 9:43 AM
Comunicazione

Perché ho cancellato la newsletter?

Apr 12th 3:00 PM
Vendita

Se vendi per forza non vendi niente

Smanettare

  • Risorse
  • Css
  • Dreamweaver
  • Forum
  • Grafica
  • Photoshop
  • Joomla
  • Phpbb3

Archivi

  • Informativa sulla privacy
  • Cookie Policy
  • Sitemap
  • Back to top

CHI SONO… SERIAMENTE

Francesca L. Luciani
Consulente di comunicazione politica e comunicazione teatrale.
www.francescaluciani.it

COPYRIGHT

Licenza Creative Commons
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Internazionale.
© Pikadilly 2020 Tutti i diritti riservati. Le immagini sono dei rispettivi autori. Cookie Policy
Il tema è di: Mip Themes
Questo sito raccoglie dati statistici anonimi sulla navigazione, mediante cookie installati da terze parti autorizzate, rispettando la privacy dei tuoi dati personali. Cliccando Ok accetti il servizio e gli stessi cookie. Leggi la cookie policy