tipo de input = “imagem” mostra a borda indesejada no Chrome e o link quebrado no IE7

Ainda não encontrei uma solução …

Eu tentei de tudo

border:0; border:none; outline:none; 

sem sorte … e o engraçado é o ícone de link quebrado no IE7 que sobrepõe a minha imagem.

Alguma sugestão? link aqui

HTML (gerado pelo WordPress)

  

CSS

 input#s{ position:relative; width:245px; height:28px; border:0; vertical-align:bottom; background:url(images/input-search-bkg.png) 0 0 no-repeat; } #searchsubmit { display:inline-block; background:url(images/submit-bkg.png) 0 0 no-repeat; width:30px; height:30px; border:0; vertical-align:bottom; } 

O Firefox e o Opera tornam o botão de imagem ok, mas no Chrome e no Safari eu vejo essa borda cinza em volta dele. IE 7 e 8 adicionar um símbolo (ícone quebrado?) Sobre a minha imagem … Estou confuso.

Você está usando a imagem como plano de fundo. Por que não configurá-lo como a propriedade src do botão?

  

Quando você define o type como image a input também espera um atributo src .

Referência: http://www.w3.org/TR/html401/interact/forms.html#adef-src e http://www.w3.org/TR/html401/interact/forms.html#h-17.4. 1

Para referência, se você quiser ficar usando CSS para dar ao botão uma imagem, por razões como fornecer uma regra: hover ou: active, você pode manter seu código como está e adicionar um botão a uma imagem invisível, eu fui com :

O que significa que é uma imagem completamente transparente, o tamanho parece não importar, mas eu fui com 1 px por 1px.

Isso funcionou para mim:

 input[type="image"]:focus { outline: none; } 

O Chrome, o IE e o Safari analisam o código de maneira imprudente.

   

não é analisado o mesmo por esses navegadores como

  

Coloque todas as suas inputs de imagem na mesma linha física no documento codificado. Eu apenas perfurei um todo através do meu monitor com o mesmo problema até que percebi isso.

Isso é feio mas funciona …

  

Tente isso

 a:active { outline: none; } a:focus { -moz-outline-style: none; } a, input { outline-color: invert; outline-style: none; outline-width: medium; } 
    Intereting Posts