Simples Ideias

Image Replacement em elementos input

11/02/07

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

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

#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 type="submit" value="Um botão" />

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

Bela dica!

Vou testar essa implementação em meus futuros projetos...

#19 Jan disse:

21 Jun 07, 01:33AM

Nando, enfrentei este problema ae lembrei de ter visto no seu blog.
Realmente fica perfeito!

Meus parabens! ;-)

Abrazzo
Jan

#20 Tiago Celestino disse:

30 Nov 07, 03:43PM

Massa. Até consegui fazer com o button, estava me batendo em fazer o IECA funcionar.

Abraços

#21 Saulo Junior disse:

12 Mar 08, 01:37PM

Muito bom, sempre recorro quando me esqueço de alguma propriedade CSS... hehehe Parabéns!

#22 Nadia disse:

14 Out 08, 09:08PM

Oi valeu! estava com um problema desses em um trabalho,e eis que encontro aqui a solução !!!

Funciona perfeitamente, muito obrigado.

#23 onnClick disse:

01 Fev 10, 10:00AM

Cara e o hover para input na B..... do ie6 não funfa né ?
Sabe como resolver este problema?

#24 Diário de bordo #15 ≈ Revolução Etc disse:

13 Mar 10, 05:40PM

[...] se lembra do texto Button Replacement que eu escrevi em novembro de 2005? O Nando Vieira encontrou uma solução muito mais limpa que aquela que eu havia utilizado. Eu não utilizo mais esta técnica faz tempo, mas ainda pode ser [...]