css - solo - ¿Cómo puedo aplicar una imagen de fondo a una entrada de texto sin perder el borde predeterminado en los navegadores Firefox y WebKit?
ms css (4)
Cuando cambia el estilo de borde o fondo en las entradas de texto, vuelven al modo de renderizado muy básico. Las entradas de texto que tienen el estilo del sistema operativo suelen ser superposiciones (como flash) que se representan en la parte superior del documento.
No creo que haya una solución pura de CSS para tu problema. Lo mejor que puede hacer, en mi opinión, es elegir un estilo que le guste y emularlo con CSS. Para que no importa en qué navegador se encuentre, las entradas se verán igual. Aún puede tener efectos de desplazamiento y similares. Los efectos de brillo del estilo OS X pueden ser engañosos, pero estoy seguro de que es factible.
@ Alex Morales: Su solución es redundante. frontera: 0; se ignora a favor del borde: 1px solid # abadb3; y da como resultado bytes innecesarios transferidos a través del cable.
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.
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.
Aquí hay 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 ve así: 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: Solución JS: todavía estoy esperando 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 Close Suficiente Solución: Basado en la sugerencia de kRON, aquí está el CSS para hacer que las entradas coincidan con FF e IE en Vista, lo que hace una buena elección si decides renunciar a los valores predeterminados puros y aplicar un estilo. He modificado su ligeramente y he añadido los efectos "azulados":
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; }
Este es el CSS que uso que puede proporcionar la mirada por defecto:
input, select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 2px #f1f4f7 solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
También puede aplicar :active y dar a los controles ese tono azulado una vez que se seleccionan.
Tenía una imagen de fondo de texto, y esto también me molestaba. Así que puse un relativo <div> alrededor de la <entrada> y luego agregué la imagen completamente posicionada sobre la <entrada>.
Luego, por supuesto, necesitaba un poco más de Javascript para ocultar la imagen si se hacía clic, o si la entrada obtenía el foco mediante tabulación o haciendo clic en los bordes de la imagen.
Con un poco de toqueteo esto se veía bastante bien con IE8, Firefox, Chrome y Opera, pero es un error horrible y sería bueno si los navegadores lo arreglaran.
¡Actualizar!
Ok, aquí hay una solución alternativa que creo que es compatible con varios navegadores. El único problema sería que el estilo predeterminado difiere en unos pocos píxeles, por lo que podría necesitar algunos ajustes.
<html>
<head>
<style>
.pictureInput {
text-indent: 20px;
}
.input-wrapper {
position:relative;
}
.img-wrapper {
position:absolute;
top:2px;
left:2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
<input type="text" class="pictureInput" />
</div>
<br />
<br />
<input type="text">
</body>
</html>
Al usar un posicionamiento relativo absoluto, puede hacer que el div absoluto (que contiene la imagen) actúe de forma absoluta en relación con su elemento primario, que todos los navegadores que conozco (sin contar las versiones inferiores a IE6, IE6 + son correctos) pueden manejarlo. La escala del usuario puede ser un problema, pero así es con las soluciones.
Por el lado positivo, no tiene que cambiar los estilos en sus entradas en absoluto (a excepción de texto-sangría, pero lo haría de todos modos, espero).
En el lado negativo, no es la solución más bonita.
¡Antiguo!
Sé que esto no es lo que quieres, pero podrías hacer algo como esto para al menos hacer que todos los bordes de entrada sean consistentes.
input {
border-color:#aaa;
border-width:1px;
}
imagen de ejemplo http://i26.tinypic.com/282eul1.png
No lo he probado en todos los navegadores, pero como no está configurando el estilo de borde, podría usar el estilo nativo pero con otro tamaño (aunque también puede omitirlo). Creo que la clave es establecer el color del borde en algo para que todos los campos de entrada utilicen el mismo color de borde y dejar el resto al navegador.