Por algún motivo, la mayoría de los navegadores modernos dejarán de aplicar su estilo de borde de entrada predeterminado a los cuadros de texto si les proporciona una imagen de fondo. En cambio, obtienes ese estilo de inserción feo. Por lo que puedo decir, tampoco hay una forma de CSS para aplicar el estilo de navegador predeterminado.¿Cómo puedo aplicar una imagen de fondo a una entrada de texto sin perder el borde predeterminado en los navegadores Firefox y WebKit?
IE 8 no tiene este problema. Chrome 2 y Firefox 3.5 lo hacen y asumo otros navegadores también. Por lo que he leído en línea, IE 7 tiene el mismo problema, pero esa publicación no tenía solución.
He aquí un ejemplo:
<html>
<head>
<style>
.pictureInput {
background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
background-position: 0 1px;
background-repeat: no-repeat;
}
</style>
<body>
<input type="text" class="pictureInput" />
<br />
<br />
<input type="text">
</body>
</html>
En Chrome 2 se parece a esto: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
Y en Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
Actualización: JS Solución: Todavía estoy esperando para encontrar una solución pura de CSS en la entrada, pero esta es la solución que usaré por ahora. Tenga en cuenta que esto está pegado directamente de mi aplicación, por lo que no es un buen ejemplo independiente como el anterior. Acabo de incluir las partes relevantes de mi gran aplicación web. Deberías ser capaz de entender la idea. El HTML es la entrada con la clase "enlace". La gran posición de fondo vertical se debe a que es un sprite. Probado en IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. Necesito ajustar la posición de fondo un par de píxeles en algunos navegadores aún:
JS:
$$('input.link').each(function(el) {
new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
});
CSS:
input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }
actualización: CSS bastante cercano Solución: sobre la base de la sugerencia de Kron aquí está la CSS para hacer las entradas coinciden con FF y el IE en Vista que hace una buena elección si decide renunciar a los valores predeterminados puros y aplicar un estilo. He modificado ligeramente y se suman los efectos "azulado":
CSS:
input[type=text], select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 1px #e3e9ef solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
border-top: 1px #5794bf solid;
border-left: 1px #c5daed solid;
border-right: 1px #b7d5ea solid;
border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
Oye, prueba esto. Es un poco hackish pero parece funcionar para mí. frontera: 0; borde: 1px sólido # abadb3; El 'borde: 0' eliminará el borde predeterminado en la entrada, y la siguiente regla será que se vea de la manera que desee. –
Lo siento, no estaba claro. Eso funcionaría si simplemente quisiera que tuviera un borde sólido, pero lo que quiero es que se vea como lo hace en los navegadores cuando no hay estilo. Quiero el estilo de borde predeterminado nativo. Por ejemplo, vea el estilo en Firefox: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc –
Mi respuesta no es redundante. El borde: 0 borra el estilo de borde en la entrada. El siguiente estilo aplica el nuevo estilo a la entrada. Al igual que en las hojas de estilos en cascada;) –