¿Cómo puedo solicitar una imagen de fondo a una entrada de texto sin perder el borde predeterminado en Firefox y WebKit navegadores?

StackOverflow https://stackoverflow.com/questions/1100409

Pregunta

Por alguna razón los navegadores más modernos dejarán de aplicar su estilo de borde de entrada por defecto a cuadros de texto si se les da una imagen de fondo. En lugar de ello se obtiene que el estilo de inserción feo. De lo que puedo decir que no hay manera de CSS para aplicar el estilo por defecto del navegador tampoco.

IE 8 no tiene este problema. Chrome y Firefox 2 3.5 hacen y lo asumen otros navegadores también. Por lo que he leído en línea IE 7 tiene el mismo problema, pero que después no tener una solución.

Este es 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: que estoy todavía con la esperanza de encontrar una solución pura CSS-on-the-entrada, pero aquí está la solución Voy a usar por ahora. Tenga en cuenta este se pega a la derecha de mi aplicación por lo que no es un buen, de pie solo como ejemplo anteriormente. Yo sólo he incluido las partes pertinentes de mi gran aplicación web. Usted debe ser capaz de obtener la idea. El HTML es la entrada a la clase de "enlace". El gran posición vertical de fondo es porque 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 de ajuste de 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; }
¿Fue útil?

Solución

Cuando cambia frontera fondo o el estilo de entradas de texto que regresan a las del modo de representación muy básica. entradas de texto que se os-estilo son por lo general se superpone (como flash es) que se representa en la parte superior del documento.

No creo que hay una solución CSS puro para su problema. Mejor que puede hacer - en mi opinión - es elegir un estilo que te gusta y emularlo con CSS. Así que no importa qué navegador que se encuentre, las entradas tendrán el mismo aspecto. Usted todavía puede tener efectos de activación y similares. efectos de estilo OS X resplandor podrían ser complicado, pero estoy seguro de que es factible.

@Alex Morales: Su solución es redundante. border: 0; se ignora en favor de la frontera: 1px solid # abadb3; y los resultados en bytes innecesarios transferidos a través del alambre.

Otros consejos

Este es el CSS que yo uso que puede proporcionar el valor por defecto mirar hacia atrás: 

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 podría aplicar :active y dar a los controles que azulado tono una vez que están seleccionados.

Actualizar

La autorización, aquí es una solución que creo que es compatible entre navegadores. El único problema sería que el estilo por defecto difiere en unos pocos píxeles por lo que este 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 utilizar el posicionamiento absoluto-relativo puede hacer que el div absoluta (que contiene la imagen) actuar absoluta en relación con su padre, que todos los navegadores que sé sobre (sin contar las versiones sub-IE6, IE6 + están bien) puede manejar. La escala del usuario puede ser un problema, pero esto es lo que pasa con soluciones alternativas.

En el lado positivo, que no tiene que cambiar los estilos en sus entradas en absoluto (excepto para el texto-guión, pero que haría que de todas formas espero).

En el lado negativo, no es la solución más bonita.

Antiguo!

Sé que esto no es lo que quiere, pero se puede hacer algo como esto para al menos hacer que toda la entrada bordea consistente. 

input {
    border-color:#aaa;
    border-width:1px;
}

ejemplo de una imagen

Yo no lo he probado en todos los navegadores, pero ya no está configurando el estilo de borde que puede ser que utilice el estilo nativo pero con otro tamaño (aunque puede omitir que también). Creo que la clave es establecer sólo el border-color a algo para que todos los campos de entrada utilizarán el mismo border-color y dejar el resto a cargo del navegador.

Yo tenía una imagen de fondo de texto, y esto también estaba molesto conmigo. Así que puse un pariente

alrededor de la y luego añadí la imagen con posición absoluta sobre los elementos .

Luego, por supuesto que necesitaba un poco más Javascript para ocultar la imagen si se ha hecho clic, o si la entrada tiene el foco tabulando, o se hace clic en los bordes de la imagen.

Con un poco de tocar el violín esto se ve bastante bueno con IE8, Firefox, Chrome y Opera, pero es una chapuza horrible y sería bueno si los navegadores arreglaron.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top