Stilizzare i form Html con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Emanuela Uttinacci nella sezione Css

Anche i form Html sono soggetti a possibili stilizzazioni mediante l'utilizzo dei Css, è possibile applicare ai principali elementi del modulo in questione tutte le stilizzazioni grafiche proprietarie dei box e dei text, per maggiori dettagli è possibile consultare le Referenze Css messe a disposizione in questo sito.

Vediamo come cambiare la grafica di un form, il codice da inserire fra i tag <head> e </head> è il seguente:

<style type="text/css">
   .form {
      background: #FFFF00;
      color:#FF0000;
      font-family: Tahoma;
      font-size: 11px;
      border: Solid 1px #000000;
   }
</style>
Non c'è molto da spiegare...

.form - definiamo il nome della classe che poi richiameremo all'interno dell'input, possiamo tranquillamente rinominarla
background: #FFFF00 - definiamo lo sfondo del form
color:#FF0000; font-family: Tahoma; font-size:11px; - definiamo il tipo, la dimensione in pixel e il colore del font
border: Solid 1px #000000; - definiamo la dimensione e il colore dei bordi

Ora all'interno del <body> e </body> proviamo ad inserire un form con il seguente codice:
<form>
   <input type="text" class="form">
   <input type="button" value="Invia" class="form">
</form>
L'attributo class="form" richiama la classe del Css a cui ci riferiamo, questo è il risultato ottenuto:
Possiamo definire due diverse classi, una per le textbox ed una per i bottoni, elementi più utilizzati nelle pagine Web interattive, ma possiamo agire anche sulle textarea e sulle selectbox, la prima si comporta in maniera analoga alle textbox, la seconda, purtroppo, non offre la possibilità di appiattire il bordo come abbiamo fatto finora... ma in compenso permette di stilizzare le singole option:
<form>
   <select>
      <option style="background: #FF0000;">Opzione # 1</option>
      <option style="background: #0000FF;">Opzione # 2</option>
      <option style="background: #00FF00;">Opzione # 3</option>
   </select>
</form>
Ecco cosa accade:
Possiamo, in fine, agire anche direttamente su di un elemento di un form, ad esempio modificando lo stile del cursore del mouse al passaggio su di un elemento, nell'esempio che segue faremo in modo da far apparire la manina classica dei link al passaggio su di un bottone:
<input type="button" value="Invia" class="form" style="cursor: Hand;">
Facile vero? Ora potete divertirvi a cambiare i vostri form con i Css fino ad ottenere l'effetto desiderato.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.937)

:: Referenze dei fogli di stile Css (41.900)

:: Menu ad effetto mouseover con i Css (39.300)

:: Effetti sui link con i Css (30.301)

:: Testo verticale coi Css (20.102)

:: Angoli smussati in un box coi Css (18.979)

:: Box con effetto ombra con i CSS3 (16.391)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.291)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.893)

:: Colorare le barre di scorrimento del browser con i Css (14.400)

IN EVIDENZA
DOWNLOAD