Todavía no he encontrado una solución …
Intenté todo
border:0; border:none; outline:none; sin suerte … y lo curioso es el icono de enlace roto en IE7 que se superpone a mi imagen.
¿Cualquier sugerencia? enlace aquí
HTML (generado por 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; }
Firefox y Opera hacen que el botón de imagen esté bien, pero en Chrome y Safari obtengo ese borde gris a su alrededor. IE 7 y 8 agregan un símbolo (icono roto?) Sobre mi imagen … Estoy desconcertado.
Estás usando la imagen como fondo. ¿Por qué no establecerlo como la propiedad src del botón?
Cuando configura el type como image la entrada también espera un atributo src .
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
Como referencia, si quiere seguir utilizando CSS para darle una imagen al botón, por razones tales como proporcionar una regla: hover o una regla activa, puede mantener el código tal como está y agregarle una imagen invisible al botón, fui con :
Lo que significa que es una imagen completamente transparente, el tamaño no parece importar, pero fui con 1 px por 1px.
Esto funcionó para mí:
input[type="image"]:focus { outline: none; }
Chrome, IE y Safari analizan el código tontamente.
no es analizado de la misma manera por estos navegadores que
Coloque todas sus entradas de 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.
Esto es feo pero funciona …
Prueba esto
a:active { outline: none; } a:focus { -moz-outline-style: none; } a, input { outline-color: invert; outline-style: none; outline-width: medium; }