Image Replacement em elementos input


Leia em menos de um minuto

Neste post, expliquei como eu estava querendo aplicar um fundo a elemento button. Eu e o Rapha aqui do UOL descobrimos ontem uma maneira de fazer isso no elemento input.

Olha que fácil. No markup:

<input type="button" value="Um botão" />

E o CSS:

input {
    border: none;
    background: url(//simplesideias.com.br/media/document-save-as.png) no-repeat;
    content: ""; /* opera */
    display: inline-block; /* opera */
    height: 32px;
    line-height: 0; /* ie */
    text-indent: -9999px;
    width: 32px;
}

O melhor de tudo é que funciona até no Opera, coisa que não tinha conseguido fazer antes! ;)

Veja o resultado nos navegadores IE6 Standalone, IE7, Firefox 2 e Opera 9:

Técnica aplicada no IE6   Técnica aplicada no IE7

Técnica aplicada no Firefox 2   Técnica aplicada no Opera 9