Alinear Input con imagen

[ztikma]

Hola amigos,

He intentado alinear una imagen a un input (campo de texto) de modo que el campo de texto se vea con bordes redondeados, por lo que debería ser mas menos así:

<img><input><img>

Lamentablemente, el input no se alinea y las imagenes quedan más arriba que la caja de texto.

¿Alguna solución?

Saludos

[Dalvenjha]

ponle tu imágen redondeada de fondo al input, no creo que varíes los tamaños de los campos input, en todo caso, muestranos tu css y el ejemplo de la web online.

Saludos.

[kalvinman]

Hay dos formas en las que yo suelo hacer este tipo de cosas:

La primera es crear la imagen de fondo colocarla en un div o en un tabla como fond y ensima el input con fondo transparente. <input type="text" style="background-color:transparent; " />

La segunda me parece mas interesante es usando CSS 3 y la funcion border radius que permite crear redondeado a los campos y objetos mediante CSS

Código CSS:

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
 

[ztikma]

Hice algo mejor. Una tabla con 3 columnas y en cada celda los elementos con padding y spacing 0 y ya.

Funciona perfecto.

Gracias de todas maneras

[kalvinman]

JEJEJJE si funciona perfecto pero no es algo mejor, estarás cargando mas gráficos, usando una tabla innecesariamente y pasando de usar 4 o 5 lineas de código a usar unas 20 lineas.

[Dalvenjha]

¿algo mejor????? tanto te costaba ponerlo de background con css? =S el border radius no sale en ningún ie a menos que uses un archivo htc, lo cual para mi no es problema, pero para los demás creo que sí por eso no lo sugerí.

[metacortex]

Iniciado por Dalvenjha

¿algo mejor????? tanto te costaba ponerlo de background con css?

Así es. Esa era la manera correcta.

[ztikma]

Lo que pasa es que así creo una caja genérica para todo el sitio, entonces sin importar la longitud de la caja de texto, la tabla se adapta manteniendo la forma.
Si hubiese hecho un css con un fondo tendría que crear un estilo para cada una de las cajas con distinto ancho.

Gracias a todos.

Saludos

[Dalvenjha]

Taaaaaaaaaaaaaaaaaaaaaaaantos inputs tienes? en todo caso podías usar border-radius como sugirió alguien en vez de hacer chapuzas.

Busca PIE.htc en google eso hará que te funcione el border radius en IE.

[metacortex]

Iniciado por ztikma

Lo que pasa es que así creo una caja genérica para todo el sitio, entonces sin importar la longitud de la caja de texto, la tabla se adapta manteniendo la forma.
Si hubiese hecho un css con un fondo tendría que crear un estilo para cada una de las cajas con distinto ancho.

Gracias a todos.

Saludos

Nada de eso. Como dice mi abuela "Oye consejo para que llegues a viejo" (Claro, el "CSS" de mi abuela es Cultivar, Surcar y Sembrar). Te hice un ejemplo que espero se explique por sí mismo:

http://www.darioferrer.com/varios/caja-input/1.php

[ztikma]

Gran ejemplo, meta. Voy a aplicarlo y les aviso.

Saludos

[kalvinman]

Iniciado por Dalvenjha

Taaaaaaaaaaaaaaaaaaaaaaaantos inputs tienes? en todo caso podías usar border-radius como sugirió alguien en vez de hacer chapuzas.

Busca PIE.htc en google eso hará que te funcione el border radius en IE.

WOWWWWW no concia PIE esta de lujooooo

[Dalvenjha]

Ah sí encontré eso como solución cuando estaba trabajando la página de este año de Buena Onda, lo uso más que nada para los border-radius, pero tiene otras utilidades.

Saludos!