Moduli CSS
L'aspetto di un modulo HTML può essere notevolmente migliorato con CSS:
Stile dei campi di input
Utilizzare la widthproprietà per determinare la larghezza del campo di input:
Esempio
input
{
width: 100%;
}
L'esempio sopra si applica a tutti gli elementi <input>. Se desideri applicare uno stile solo a un tipo di input specifico, puoi utilizzare i selettori di attributi:
input[type=text]- selezionerà solo i campi di testoinput[type=password]- selezionerà solo i campi della passwordinput[type=number]- selezionerà solo i campi numerici- eccetera..
Ingressi imbottiti
Utilizzare la paddingproprietà per aggiungere spazio all'interno del campo di testo.
Suggerimento: quando hai molti input uno dopo l'altro, potresti anche voler aggiungerne alcuni marginper aggiungere più spazio al di fuori di essi:
Esempio
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Si noti che abbiamo impostato la box-sizingproprietà su
border-box. Questo assicura che il riempimento e gli eventuali bordi siano inclusi nella larghezza e nell'altezza totali degli elementi.
Maggiori informazioni sulla box-sizingproprietà nel nostro capitolo CSS Box Sizing .
Input delimitati
Utilizzare la borderproprietà per modificare la dimensione e il colore del bordo e utilizzare la border-radiusproprietà per aggiungere angoli arrotondati:
Esempio
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Se vuoi solo un bordo inferiore, usa la border-bottomproprietà:
Esempio
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Input colorati
Utilizzare la background-colorproprietà per aggiungere un colore di sfondo all'input e la colorproprietà per modificare il colore del testo:
Esempio
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Input mirati
Per impostazione predefinita, alcuni browser aggiungeranno un contorno blu attorno all'input quando viene messo a fuoco (facendo clic su). È possibile rimuovere questo comportamento aggiungendo outline: none;all'input.
Usa il :focusselettore per fare qualcosa con il campo di input quando diventa attivo:
Esempio
input[type=text]:focus
{
background-color: lightblue;
}
Esempio
input[type=text]:focus
{
border: 3px solid #555;
}
Ingresso con icona/immagine
Se vuoi un'icona all'interno dell'input, usa la background-imageproprietà e posizionala con la background-positionproprietà. Si noti inoltre che aggiungiamo un ampio padding sinistro per riservare lo spazio dell'icona:
Esempio
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Input di ricerca animato
In questo esempio usiamo la transitionproprietà CSS per animare la larghezza dell'input di ricerca quando diventa attivo. Imparerai di più sulla
transitionproprietà più avanti, nel nostro capitolo Transizioni CSS .
Esempio
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Stile delle aree di testo
Suggerimento: usa la resizeproprietà per impedire il ridimensionamento delle aree di testo (disabilita il "grabber" 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;
}
Stile Selezionare i menu
Esempio
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
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;
}
/* Tip: use width: 100% for full-width buttons */
Per ulteriori informazioni su come applicare uno stile ai pulsanti con i CSS, leggi il nostro Tutorial sui pulsanti CSS .
Modulo reattivo
Ridimensiona la finestra del browser per vedere l'effetto. Quando lo schermo ha una larghezza inferiore a 600 px, fai in modo che le due colonne siano impilate una sopra l'altra invece che una accanto all'altra.
Avanzate: l'esempio seguente utilizza media query per creare un modulo reattivo. Imparerai di più su questo in un capitolo successivo.