Differenziare gli stili dei campi di input

26 aprile 2011

I campi di tipo input contenuti all’interno di un form sono di diverse tipologie:

  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text

Spesso si ha la necessità di differenziare lo stile in base alla tipologia del campo; ad esempio un campo di tipo submit nella maggior parte dei casi necessita di uno stile differente da un campo di testo tradizionale. Una regola come la seguente:

input { 
  background: white;
  border: 1px solid red;
  color: red;
  width: 150px;
}

assegnerà lo stesso stile a tutti i campi di input a prescindere dal fatto che essi siano di tipo testo, submit, checkbox e così via, come possiamo vedere nel seguente esempio.

Per distinguere i vari campi, e quindi differenziarne lo stile, la soluzione più semplice è quella di assegnare una classe ad ogni tipologia di campo di input. Ad esempio:

input.text {
  background: white;
  border: 1px solid red;
  color: red;
  width: 150px;
}

input.submit {
  background: red;
  border: 1px solid white;
  color: white;
  width: 100px;
}

Le regole appena viste possono essere applicate ad un form come il seguente:

<form action="">
    <input type="text" class="text" /> 
    <input type="submit" class="submit" />
</form>

La stessa tecnica può essere utilizzata per le altre tipologie di campi in maniera da avere pieno controllo nella personalizzazione del form.

Possiamo vedere tutto all’opera nel secondo esempio.

Stili differenti con i CSS3

L’esempio che abbiamo appena visto potrebbe essere realizzato utilizzando le nuove specifiche del CSS3 senza la necessità di classi aggiuntive. Si potrebbero infatti sfruttare i selettori per attributo.

Il codice CSS precedente diviene:

input[type="text"] {
  background: white;
  border: 1px solid red;
  color: red;
  width: 150px;
}

input[type="submit"] {
  background: red;
  border: 1px solid white;
  color: white;
  width: 100px;
}

Esempio.

Purtroppo i selettori per attributo non sono supportati dalla versione 6 di Internet Explorer quindi bisogna prestare molto attenzione al loro utilizzo.

Approfondimenti

Tutte le lezioni

1 ... 40 41 42 ... 49

Se vuoi aggiornamenti su Differenziare gli stili dei campi di input inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Differenziare gli stili dei campi di input

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing