Imparare a modellare i moduli con i CSS è un ottimo modo per migliorare l'aspetto del tuo sito web. Le forme HTML sono probabilmente tra le cose più brutte sulla maggior parte delle pagine web. Sono spesso noiosi e utilitaristici e non offrono molto in termini di stile.
Con i CSS, questo può cambiare. La combinazione di CSS con i tag di forma più avanzati può fornire alcuni moduli di aspetto piacevole.
Cambia i colori
Proprio come con il testo, puoi modificare i colori di primo piano e di sfondo degli elementi del modulo. Un modo semplice per cambiare il colore di sfondo di quasi tutti gli elementi del modulo consiste nell'utilizzare la proprietà background-color sul tag input. Ad esempio, questo codice applica un colore di sfondo blu (# 9cf) su tutti gli elementi.
input { background-color: # 9cf; colore: # 000;}
Per cambiare il colore di sfondo solo di alcuni elementi del modulo, aggiungi textarea e seleziona lo stile. Per esempio:
input, textarea, selezionare { background-color: # 9cf; colore: # 000;}
Assicurati di cambiare il colore del testo se rendi scuro il tuo colore di sfondo. I colori contrastanti contribuiscono a rendere più leggibili gli elementi del modulo. Ad esempio, il testo su un colore di sfondo rosso scuro viene letto molto più facilmente se il colore del testo è bianco. Ad esempio, questo codice posiziona il testo bianco su uno sfondo rosso.
input, textarea, selezionare { background-color: # c00; colore: #fff;}
Puoi anche inserire un colore di sfondo sul tag stesso. Ricorda che il tag form è un elemento block, quindi il colore si riempie nell'intero rettangolo, non solo le posizioni degli elementi. Puoi aggiungere uno sfondo giallo a un elemento di blocco per far risaltare l'area, in questo modo:
modulo { background-color: #ffc;}
Aggiungi bordi
Come con i colori, puoi cambiare i bordi dei vari elementi del modulo. È possibile aggiungere un singolo bordo attorno all'intero modulo. Assicurati di aggiungere il padding, altrimenti gli elementi del modulo si incepperanno proprio accanto al bordo. Ecco un esempio di codice per un bordo nero da 1 pixel con 5 pixel di riempimento:
modulo { border: 1px solid # 000; imbottitura: 5px;}
Puoi mettere bordi in giro più che solo la forma stessa. Modifica il bordo degli elementi di input per farli risaltare:
input { border: 2px dashed # c00;}
Fai attenzione quando metti i bordi sulle caselle di input perché sembrano meno caselle di input, e alcune persone potrebbero non rendersi conto di poter compilare il modulo.
Combina le caratteristiche di stile
Mettendo insieme i tuoi elementi del modulo con il pensiero e alcuni CSS, puoi creare una bella forma che integri il design e il layout del tuo sito.
