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:

/* tutti gli input */
input {
  width: 100%;
}

/* tutti gli input di tipo testo */
input[type="text"] {
  width: 100%;
}

/* tutti gli input di tipo password */
input[type="password"] {
  width: 100%;
}

Input con Padding

Utilizza la proprietà padding per aggiungere spazio all’interno del campo di testo.

input {
  width: 100%;
  padding: 20px;
}

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:

input[type="text"] {
  border: 2px solid red;
  border-radius: 4px;
}

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:

input {
  background-color: #212121;
  color: white;
}

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:focus {
  background-color: salmon;
}

input[type="text"]:focus {
  border: 3px solid red;
}

Input con Icona/Immagine

Se desideri un’icona all’interno dell’input, utilizza la proprietà background-image e posizionala con la proprietà background-position.

input[type="password"] {
  background-color: white;
  background-image: url("lucchetto.png");
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

Stile delle Textarea

Utilizza la proprietà resize per impedire il ridimensionamento dei textarea. Ovviamente puoi applicare tutte le altre regole già viste in precedenza.

textarea {
  width: 100%;
  height: 150px;
  resize: none;
}

Stile delle Select

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Stile dei Input come Bottoni

input[type="button"],
input[type="submit"],
input[type="reset"] {
  border: none;
  color: white;
  padding: 10px 20px;
  background-color: #212121;
  margin: 10;
  cursor: pointer;
  text-decoration: none;
}