Lo sguardo di un modulo HTML può essere notevolmente migliorata con i CSS:
Styling Campi di input
Utilizzare la width proprietà per determinare la larghezza del campo di input:
L'esempio di cui sopra si applica a tutti <input> elementi. Se si desidera solo per lo stile di un tipo di input specifico, è possibile utilizzare selettori di attributo:
-
input[type=text]- consente di selezionare solo i campi di testo -
input[type=password]- consente di selezionare solo i campi di password -
input[type=number]- consente di selezionare solo i campi numerici - eccetera..
Ingressi imbottite
Utilizzare la padding proprietà per aggiungere spazio all'interno del campo di testo.
Suggerimento: Quando si hanno molti ingressi dopo l'altro, si potrebbe anche voler aggiungere qualche margin , 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 tu stesso "  | Si noti che abbiamo impostare il box-sizing proprietà border-box . Questo assicura che i confini imbottitura ed eventualmente sono inclusi nella larghezza totale e l'altezza degli elementi. Per saperne di più sul box-sizing immobile nella nostra CSS3 Box Dimensionamento capitolo. |
|---|
Ingressi Delimitata
Utilizzare il border proprietà per modificare le dimensioni e il colore del bordo, e utilizzare il border-radius proprietà per aggiungere gli angoli arrotondati:
Se si desidera solo un bordo inferiore, utilizzare il border-bottom di proprietà:
Ingressi colorate
Utilizzare il background-color proprietà per aggiungere un colore di sfondo per l'ingresso e il color proprietà per modificare il colore del testo:
Ingressi mirate
Per impostazione predefinita, alcuni browser aggiungere un contorno blu intorno l'ingresso quando si arriva a fuoco (cliccato). È possibile rimuovere questo comportamento con l'aggiunta di outline: none; all'ingresso.
Utilizzare il :focus selettore per fare qualcosa con il campo di input quando viene messa a fuoco:
Ingresso icona / immagine con
Se si desidera che l'icona dentro l'ingresso, utilizzare il background-image proprietà e posizionarlo con il background-position proprietà. Si noti inoltre che aggiungiamo una grande padding sinistro di 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;
} Prova tu stesso " Animated Ricerca ingresso
In questo esempio si usa il CSS3 transition di proprietà per animare la larghezza della casella di input quando si arriva a fuoco. Imparerete di più sulla transition immobile più tardi, nel nostro CSS3 Transitions capitolo.
Esempio
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Prova tu stesso " styling textarea
Suggerimento: Utilizzare il resize di proprietà per evitare textareas venga ridimensionata (disattivare 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;
} Prova tu stesso " Styling selezionare i menu
Esempio
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Prova tu stesso " Styling 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 */ Prova tu stesso " Per ulteriori informazioni su come lo stile pulsanti con i CSS, leggere il nostro tutorial Pulsanti CSS .