¿Qué HTML/CSS usarías para crear una entrada de texto con un fondo?

Question

que tienen un diseño de sitio web que incluye campos de entrada de texto que se ven así:

Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png

Me pregunto cuál es la mejor solución para la creación de este campo de entrada es.

Una idea que tengo es tener siempre un div alrededor de la entrada de una imagen de fondo y todas las fronteras con discapacidad en el campo de entrada y especificados anchura en píxeles, tales como:

<div class="borderedInput"><input type="text" /></div> 

he tratado de disuadirlos de usar este formato, pero no se desanimarán, así que parece que voy a tener que hacerlo.

¿Es esto mejor o hay otra manera?

-

prueba:

He intentado lo siguiente:

<style type="text/css"> 
input.custom { 
    background-color: #fff; 
    background:url(/images/input-bkg-w173.gif) no-repeat; 
    width:173px; 
    height:28px; 
    padding:8px 5px 4px 5px; 
    border:none; 
    font-size:10px; 
} 
</style> 
<input type="text" class="custom" size="12" /> 

pero en IE (6 & 7) hace lo siguiente cuando se escribe más que el ancho:

Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png

Answer 1

lo haría de esta manera:

<style type="text/css"> 
div.custom { 
    background:url(/images/input-bkg-w173.gif) no-repeat; 
    padding:8px 5px 4px 5px; 
} 
div.custom input { 
    background-color: #fff; 
    border:none; 
    font-size:10px; 
} 
</style> 
<div class="custom"><input type="text" class="custom" size="12" /></div> 

Sólo hay que ajustar los valores de relleno así que todo encaja correctamente. Es, en mi opinión, definitivamente la mejor solución, ya que en cualquier otro caso está trabajando con un campo de entrada completo. Y todo el campo de entrada es, por definición, un recuadro donde los usuarios pueden ingresar texto.

Si puede confiar en JavaScript, puede ajustar dichos div-Elements alrededor de sus campos de entrada programáticamente.

Editar: con jQuery que podría hacerlo de esta manera:

$('input.custom').wrap('<div class="custom"></div>'); 

CSS:

div.custom { 
    background:url(/images/input-bkg-w173.gif) no-repeat; 
    padding:8px 5px 4px 5px; 
} 
input.custom { 
    background-color: #fff; 
    border:none; 
    font-size:10px; 
} 

Y su HTML:

<input class="custom" ... /> 

Answer 2

Tengo que hacer ne esto algunas veces Tengo la imagen de fondo dentro de un div y uso css para ubicar el campo de entrada en consecuencia.

echar un vistazo en el siguiente sitio creé que utiliza esta técnica y utilizando un código: http://www.ukoffer.com/ (lado Boletín mano derecha)

Answer 3

No es necesario el elemento div, puede asignar un fondo a la entrada directamente.

Editar: Aquí está el código de trabajo. Lo probé, pero tendrás que ajustarlo para tus necesidades. Por lo que puedo decir, todo lo que se necesita aquí es necesario.

input { 
    background: #FFF url(test.png) no-repeat bottom right; 
    width: 120px; 
    height: 20px; 
    line-height:20px; 
    padding:0; 
    text-indent:3px; 
    margin:0; 
    border: none; 
    overflow:hidden; 
} 

Edit2: no estoy muy seguro de por qué estoy recibiendo downvoted, pero este método debería funcionar a menos que necesite una imagen más grande que el elemento de entrada en sí. En ese caso, debe usar el elemento extra div. Sin embargo, si la imagen es del mismo tamaño que la entrada, no es necesario el marcado adicional.

Edit3: Ok, después de que Bobince señaló un problema, me estoy acercando un poco. Esto funcionará en IE6 & 7 y está cerca en FF, pero todavía estoy trabajando en esa parte.

input { 
    background: #FFF url(test.png) no-repeat 0px 0px; 
    background-attachment:fixed; 
    width: 120px; 
    height: 20px; 
    line-height:20px; 
    padding:0px; 
    text-indent:3px; 
    margin:0; 
    border: none; 
} 
body>input { 
    background-position:13px 16px; 
} 

Edit4: Ok, creo que lo tengo en esta ocasión, pero requiere el uso de un selector CSS3, por lo que no se validará como CSS 2.1.

input { 
    background: #FFF url(test.png) no-repeat 0px 0px; 
    background-attachment:fixed; 
    width: 120px; 
    height: 20px; 
    line-height:20px; 
    padding:0px; 
    text-indent:3px; 
    margin:0; 
    border: none; 
} 
body>input { 
    background-position:13px 16px; 
} 
body>input:enabled { 
    background-position:9px 10px; 
} 

body> de entrada se dirigirá a todo excepto para IE6, el cuerpo> Entrada: habilitado se dirigirá a los elementos de formulario que no son discapacitados para todos los navegadores excepto IE 6, 7, 8. & Sin embargo, debido a que: habilitado es un selector de CSS3, no valida como CSS2.1. No pude encontrar un selector de CSS2 apropiado que me permitiera separar IE7 de los otros navegadores. Si no validar (aún, hasta que el validador cambie a CSS3) es un problema para ti, entonces creo que tu única opción es el elemento extra div.

Answer 4

¿Ha evaluado la imagen de fondo utilizando la siguiente manera:

<style type="text/css"> 
    input{ 
    background-color: #AAAAAA; 
    background-image: url('http://mysite.com/input.gif'); 
    border: 0px; 
    font-family: verdana; 
    font-size: 10px; 
    color: #0000FF; 
} 

Answer 5

yo sepa, el fondo de desplazamiento problema puede ser resuelto en Firefox y amigo s, O Internet Exploder; pero no a todos felices a la vez.

Normalmente, habría dicho que me gusta la entrada directamente, pero ahora que lo pienso, el ejemplo de div no suena mal y debería solucionar el problema de desplazamiento de la imagen de fondo.

En ese caso, establecería un div como posición: relativo, y colocaría la entrada dentro de él con el relleno y el ancho adecuados (o 100% de ancho si el relleno es 0), fondo transparente y coloque una imagen en el div .

Answer 6

okoman ha obtenido el aspecto CSS correcto. ¿Puedo sugerir usar un <label> para mejorar la estructura semántica del marcado?

<label id="for-field-name" for="field-name"> 
    <span class="label-title">Field Name <em class="required">*</em></span> 
    <input id="field-name" name="field-name" type="text" class="text-input" /> 
</label> 

<style type="text/css"> 
    label, span.label-title { display: block; } 
</style> 

Esto no sólo es más accesible, sino que proporciona numerosos ganchos que se pueden utilizar para cualquier tipo de manipulación DOM, validación o labrar el campo específico en el futuro.

Editar: Si no desea que el título etiqueta que se mostrará por alguna razón, se puede dar una clase de 'accesibilidad' y establecer la clase de display: none; en el CSS. Esto permitirá a los lectores de pantalla comprender la entrada pero ocultarla a los usuarios habituales.

Answer 7

La forma más fácil de deshacerse de la abundancia sin JavaScript es simple:

1. Crear un 3 vanos, y establecer sus alturas a la altura de la imagen de .
2. Corte la imagen en 3 partes, asegurándose de cortar la imagen de manera que las partes redondas izquierda y derecha estén en la 1ª y 3ª imágenes respectivamente.
3. Establezca el fondo del primer tramo en la imagen con el borde izquierdo y configúrelo como no repetido.
4. Establezca el fondo del tercer tramo en la imagen con el borde derecho y configúrelo en sin repetición.
5. Coloque la entrada dentro del tramo central, recordando establezca su altura a la altura de los tramos, y su fondo a la segunda imagen , y solo a la repetición-x.
6. Eso asegurará que la entrada parezca expandirse horizontalmente una vez que se llene la entrada. No se superpone , y no se necesita JS.

HTML Suponiendo que la altura de la imagen es 60 píxeles, el ancho de la primera y la tercera lapso es 30px,

<span id="first">nbsp;</span><br /> 
<span id="second"><input type="text" /></span><br /> 
<span id="third">nbsp;</span> 

CSS

span#first{background:url('firstimage') no-repeat; height:60px; width:30px;} 
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;} 
span#second input{background:url('second image') repeat-x; height:60px;} 

Eso debería resolver su problema.