Oggi voglio parlarti di come formattare graficamente un input di tipo button o submit. Di per se non è molto complesso e laborioso ma a volte Internet explorer nasconde delle sorprese inaspettate 
La parte HTML
Per quanto riguardo l’html, niente di più semplice. Ho voluto prendere in esame un normalissimo form di ricerca con al suo interno un unico pulsante search.
<form action="#" method="post">
<input type="submit" value="Cerca" class="search">
</form>
Resettiamo i valori di default
Di default ogni browser inserisce dei valori di default per alcune proprietà. E’ cosa buona e giusta resettarli affinchè non influiscano in maniera imprevista sul nostro lavoro.
input.search{
border:0;
padding:0;
}
Formattazione visiva
Ho deciso di formattare il mio pulsante inserendo un immagine di background che contenga al suo interno anche il testo “Cerca”. Per farlo bisogna assegnare un altezza e una larghezza pari alle dimensioni dell’immagine.
input.search{
height: 32px;
width: 91x;
background:url(search.png) no-repeat 0 0;
}
Rendiamo invisibile il testo
L’ultima cosa rimasta da fare è nascondere il testo che di default viene inserito all’interno del pulsante. Per farlo basterebbe un semplice text-indent negativo, soluzione che di per se funziona su tutti i browser moderni, comprese le versioni 8 e 9 di Internet explorer.
input.search{
text-indent:-999px;
}
IE6 e IE7 hanno bisogno di un paio di accorgimenti in più, e in particolare della propietà display settata a block, per non cadere nel “hasLayout”, e infine, per far si che il testo scompaia anche per queste due versioni, devi aggiungere text-transform:uppercase.
input.search{
display:block;
text-transform:uppercase;
}
0 Commenti.