Text-indent negativo per gli input di tipo button o submit

Button & Submit Oggi voglio parlarti di come formattare graficamente un input di tipo button o submit. Di per se […]
Text-indent negativo per gli input di tipo button o submit

Button & Submit

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>

Segui i seguenti step

Step by Step ti porto a formattare gli input in questione, la grafica che ne può scaturire la lascio a te.

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;
}

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github