Form CSS

Utilizzando CSS, è possibile migliorare notevolmente l'aspetto degli HTML form:

Prova da solo

per impostare lo stile del campo di input

Usare width per determinare la larghezza del campo di input dell'attributo:

Esempio

input {
  width: 100%;
}

Prova da solo

L'esempio precedente si applica a tutti gli elementi <input>. Se si desidera impostare uno stile per un tipo specifico di input, è possibile utilizzare il selettore di attributo:

  • input[type=text] - selezionerà solo i campi di testo
  • input[type=password] - selezionerà solo i campi password
  • input[type=number] - selezionerà solo i campi numerici
  • etc...

riempire la casella di input

Usare padding per aggiungere spazio all'interno del campo di testo.

Attenzione:Se ci sono molti campi di input, potresti anche dover aggiungere margini esterni per aggiungere più spazio al di fuori di essi:

Esempio

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Prova da solo

Notare che abbiamo impostato box-sizing impostare l'attributo a border-boxIn questo modo, puoi assicurarti che la larghezza e l'altezza totali dell'elemento includano i margini interni (riempimento) e il bordo finale.

Per favore, nel nostro Dimensioni della scatola CSS in questa sezione apprenderai box-sizing per saperne di più sulle proprietà di questo attributo.

casella di input con bordo

Utilizzare border per cambiare la spessore e il colore del bordo, e utilizzare border-radius per aggiungere arrotondamenti agli angoli:

Esempio

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

Prova da solo

Se si desidera solo il bordo inferiore, utilizzare border-bottom Attributo:

Esempio

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Prova da solo

casella di input colorata

Utilizzare background-color per aggiungere un colore di sfondo all'input e utilizzare color per cambiare il colore del testo dell'attributo:

Esempio

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Prova da solo

il campo di input con il fuoco

Di default, alcuni browser aggiungono un contorno blu attorno al campo di input quando riceve il fuoco (clic) outline: none; per eliminare questo comportamento.

Usare :focus Il selettore può impostare uno stile quando il campo di input riceve il fuoco:

Esempio 1

input[type=text]:focus {
  background-color: lightblue;
}

Fare clic nel campo di testo:

Prova da solo

Esempio 2

input[type=text]:focus {
  border: 3px solid #555;
}

Fare clic nel campo di testo:

Prova da solo

casella di input con icona/immagine

Se si desidera includere un'icona/immagine nell'input, utilizzare proprietà background-image e associarla a proprietà background-position proprietà insieme. Inoltre, abbiamo aggiunto un padding-left più grande per lasciare spazio all'icona:

Esempio

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

Prova da solo

casella di ricerca con animazione

In questo esempio, usiamo CSS transition proprietà per impostare l'animazione della variazione di larghezza quando l'input di ricerca viene messo a fuoco. Più avanti, nei nostri Transizioni CSS in questa sezione abbiamo appreso di più su transition conoscenza delle proprietà.

Esempio

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Prova da solo

Impostare lo stile dei campi di testo

Attenzione:Usare resize L'attributo può prevenire la ridimensionabilità dei textareas (disabilita il “grilletto” nell'angolo in basso a destra):

Esempio

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Prova da solo

Impostare lo stile del menu a scelta multipla

Esempio

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

Prova da solo

Impostare lo stile dei pulsanti di input

Esempio

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Suggerimento: utilizzare width: 100%, per ottenere pulsanti a piena larghezza */

Prova da solo

Per ulteriori informazioni su come impostare lo stile dei pulsanti con CSS, esamina il nostro Pulsanti CSS Tutorial.

Menu responsive

Modifica la dimensione della finestra dell'editor TIY per vedere l'effetto. Quando la larghezza dello schermo è inferiore a 600 pixel, le due colonne si posizionano una sopra l'altra anziché una accanto all'altra.

Avanzato: gli esempi seguenti utilizzano Query media Per creare un modulo responsive. Nell'articolo successivo, imparerai di più su questi argomenti.

Visualizza il menu responsive