Simples Idéias. Por Nando Vieira. » Arquivo » Image Replacement em elementos input

Image Replacement em elementos input

11/02/07

Tags: , Browser, CSS, Dica, Firefox, HTML, Image Replacement, Internet Explorer, Opera

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(http://m.simplesideias.com.br/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

Permalink
Trackback
Feed dos comentários
Ao som de: Ramones – Danny Says

Comentários #

#1 Jeferson disse:

11 Fev 07, 06:26PM

Você está usando a versão standalone do IE6 do evolt? Nunca usei essas versões standalone porque fico com um pé atrás. Não tenho como saber com certeza se o standalone irá se comportar da mesma forma em todas situações.

Por isso uso o IE6 "padrão" e o IE7 numa VM.

#2 Newton Wagner disse:: 12 Fev 07, 10:06AM; Não conhecia esse valor para display: inline-block.
Faz parte das recomendações do W3C?

#3 Nando Vieira disse:

12 Fev 07, 10:35AM

Sim, é totalmente válida.

http://www.w3.org/TR/CSS21/visuren.html#display-prop

#4 Micox disse:: 13 Fev 07, 09:59AM; Muito, muito bom.
Gostei do truque com o content:""

#5 rapha » Image replacement em campos input=submit disse:: 13 Fev 07, 06:38PM; [...] Ele descreve a solução no blog dele em http://simplesideias.com.br/image-replacement-em-elementos-input/ [...]

#6 Filipe disse:

14 Fev 07, 10:24AM

poxa kra, eu nao sabia disso nao, costumava usar input type imgage, vlw ai a dica.

flw abraço

#7 Urls Sinistras » Blog Archive » Replacement em input disse:: 22 Fev 07, 07:32PM; [...] Image Replacement em elementos input? [...]

#8 Rafael Biasi disse:

22 Fev 07, 08:43PM

Eu prefiro usar a tag :

input.um_botao {
border: none;
background: url(http://m.simplesideias.com.br/document-save-as.png) no-repeat;
height: 32px;
text-indent: -9999px;
overflow: hidden;
width: 32px;
}

#9 Pedro Rogério disse:: 22 Fev 07, 10:47PM; Show de bola!!!!

#10 Nando Vieira disse:: 22 Fev 07, 11:35PM; @Rafael: Teoricamente, esse código deveria funcionar - eu fazia assim antes - mas no Opera não rola. Com as regras que eu coloquei no post, funciona em todos!

#11 Fabrício disse:: 23 Fev 07, 10:26AM; Ae nando estou aplicando essas dicas em um trabalho,
Uma ultima duvida css válido? Sem opção de testes no momento.

#12 Nando Vieira disse:: 23 Fev 07, 11:50AM; Fabrício, todas as regras são válidas. A única coisa que acontece é que os browsers que não suportam determinada regra, simplesmente não a aplica.

#13 Paulo Gomes disse:: 23 Fev 07, 08:30PM; Legal, assim fica mais fácil manipular o input…

#14 Leonardo S. R. disse:: 09 Mar 07, 09:27AM; Eu usaria a tag "button".
Claro que isso ficaria visualmente diferente, porem ficaria nítido que é um elemento "clicavel".

#15 Nando Vieira disse:: 09 Mar 07, 09:31AM; Leonardo, não acredito que ser visualmente clicável é um problema. Basta adicionar o css cursor: pointer. A idéia é que você pode padronizar todos os elementos do tipo button (button, submit).

#16 Nandico disse:: 15 Abr 07, 05:11PM; Oi Nando e Rapha! Valeu o bizú, funcionou redondo aqui. Abraços…

#17 Rubens disse:

26 Abr 07, 04:45PM

Velho, vc salvou a minha paciência, a técnica foi tiro e queda… e olha q mexo com isso faz tempooooo…. preguiça de perguntar ao meu "mestre dos magos"

Abração guri, parabéns ai pela caminhada.

#18 Carlos Eduardo disse:

08 Maio 07, 10:18AM