input type = "image" muestra borde no deseado en Chrome y enlace roto en IE7

no he encontrado todavía una solución ...input type = "image" muestra borde no deseado en Chrome y enlace roto en IE7

He intentado todo

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

sin ninguna suerte ... y Lo curioso es el icono de enlace roto en IE7 que se superpone a mi imagen.

¿Alguna sugerencia? link here

HTML (generado por WordPress)

<form id="searchform" method="get" action="http://eezzyweb.com/"> 
    <div> 
    <input id="s" name="s" type="text" value="" size="32" tabindex="1"/> 
    <input id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/> 
    </div> 
</form>

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

Firefox y Opera hacen que el botón de imagen bien, pero en Chrome y Safari recibo que un borde gris alrededor de él. IE 7 y 8 agregan un símbolo (icono roto?) Sobre mi imagen ... Estoy desconcertado.

Fuente

2010-11-05 Mirko

Necesita más código. –

Y un enlace o captura de pantalla de lo que ve. –

¿Por qué no usa la etiqueta en su lugar? –

Está utilizando la imagen como fondo. ¿Por qué no establecerlo como la propiedad src del botón?

<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>

Cuando se establece el type como image la entrada espera una src atribuyen, así ..

Referencia: http://www.w3.org/TR/html401/interact/forms.html#adef-src y http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

Fuente

2010-11-05 21:30:23

Esta es la forma correcta de hacerlo. – Stephen

Este es un error de Chrome/Safari. Cuando le das un atributo src, no se muestra ninguna imagen, sino que solo se muestra el cuadro gris alrededor de la imagen. La única forma de obtener la imagen es con background-image, que siempre le da un cuadro gris no deseado. – user1040323

-1

probar este

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

Fuente

2010-11-26 17:09:04 K360

Esto no sirve para nada, ya sea – user1040323

Chrome, IE, y Safari analiza el código tontamente.

<input type="image" src="bleh.png"> 
<input type="image" src="bleh.gif">

no se analiza la misma por estos navegadores como

<input type="image" src="bleh.png"><input type="image" src="bleh.gif">

Ponga todos sus insumos imagen en la misma línea física en el documento codificado. Casi punteé un todo a través de mi monitor con el mismo problema hasta que me di cuenta de esto.

Fuente

2011-10-26 19:43:19 Sean

Como referencia, si quiere seguir usando CSS para darle al botón una imagen, por razones tales como proporcionar una: activa o una regla activa, puede mantener su código tal como está y agregarle una imagen invisible , fui con:

<input type='image' src='invisible.png'/>

¿Qué significa su una imagen completamente transparente, el tamaño no se parece a la materia, pero yo fui con 1 px por 1 px.

Fuente

2012-01-31 05:41:44

, probablemente sea un gif invisible, por razones de compatibilidad ie6. –

Esto es un poco viejo. Pero aquí va, no tienes que usar un gif. También puede usar un PNG de 8 bits, esto es compatible con IE. –

Esto también es útil cuando se usan sprites css como imagen de fondo por clase. La referencia gif transparente elimina el borde en Chrome. Por cierto, prefiero .gif porque es menos de la mitad del tamaño de un png (probablemente debido a los encabezados del contenedor) de este tamaño. – secretwep

Esto es feo, pero funciona ...

<input id="saveForm" style="border:0px;" type="image" name="submit" value="Submit" BORDER="0" src="./images/button_submit.png" />

Fuente

2012-10-09 17:52:31

Es feo y ni siquiera funciona – user1040323

Esto funcionó para mí:

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

Fuente

2015-03-20 20:53:41

input type = "image" muestra borde no deseado en Chrome y enlace roto en IE7

Respuesta

Cuestiones relacionadas