Principio Specificità in CSS
Lo stile predefinito dei form in HTML è decisamente non all’altezza, fortunatamente con CSS possiamo creare qualcosa di molto più bello.
Stile dei Campi di Input
Utilizza la proprietà width
per determinare la larghezza del campo di input:
Input con Padding
Utilizza la proprietà padding
per aggiungere spazio all’interno del campo di testo.
Input con Bordi
Utilizza la proprietà border
per cambiare la dimensione e il colore del bordo e la proprietà border-radius
per aggiungere angoli arrotondati:
Campi Colorati
Utilizza la proprietà background-color
per aggiungere un colore di sfondo all’input e la proprietà color per cambiare il colore del testo:
Focus sugli input
Per impostazione predefinita, alcuni browser aggiungeranno un contorno blu intorno all’input quando riceve il focus (cliccato). Puoi rimuovere questo comportamento aggiungendo outline: none; all’input.
Utilizza il selettore :focus
per fare qualcosa con il campo di input quando riceve il focus:
Input con Icona/Immagine
Se desideri un’icona all’interno dell’input, utilizza la proprietà background-image
e posizionala con la proprietà background-position
.
Stile delle Textarea
Utilizza la proprietà resize per impedire il ridimensionamento dei textarea. Ovviamente puoi applicare tutte le altre regole già viste in precedenza.