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;
}Purtroppo i selettori per attributo non sono supportati dalla versione 6 di Internet Explorer quindi bisogna prestare molto attenzione al loro utilizzo.