Programmazione Web » Css » Personalizzare la grafica dei form
Personalizzare la grafica dei form
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 1333 volte
Vi siete mai chiesti se è possibile colorare il pulsante di invio di un form? E secondo voi ? possibile cambiare anche il colore del carattere? Ebbene s?, tutto questo si pu? fare grazie ai CSS.
La prima cosa da fare ? inserire il seguente codice tra i tags <head> e </head>:
<style type='text/css'>
/*Imposto i parametri per input e pulsanti*/
input {
border-left: 1px solid #DEDEDE;
border-right: 1px solid #DEDEDE;
border-top: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE;
font-family: Verdana, Serif; text-decoration: none;
text-transform: none;
color: #E47804;
background: #EEEEEE;
font-size:10px;
}
/*Imposto i parametri per le textarea*/
textarea {
border-left: 1px solid #DEDEDE;
border-right: 1px solid #DEDEDE;
border-top: 1px solid #DEDEDE;
border-bottom: 1px solid #DEDEDE;
font-family: Verdana, Serif; text-decoration: none;
text-transform: none;
color: #E47804;
background: #EEEEEE;
font-size:10px;
}
</style>
Ora creiamo tra i tags <body> e </body> il nostro form. Ecco un esempio:
<form method="post" action="pippo.php" name="form">
<input type="text name="primo">
<textarea name="secondo" rows="20" cols="20">
Testo di prova
</textarea>
<input type="submit" value="Invia">
<input type="reset" value="Cancella">
</form>
E' possibile personalizzare tutte le componenti di un form. In questo tutorial noi abbiamo analizzato solo input e textarea, ma potrete ripetere lo stesso procedimento per combo, select, ecc...
Aggiungi questo tutorial ai preferiti
