Foros del Web » Creando para Internet » CSS »

Poner imagen en un input

Estas en el tema de Poner imagen en un input en el foro de CSS en Foros del Web. Hola a todos lo quenecesito es poner una imagen dentro de un input text, para que se vea mas bonito, ejemplo: Como se puede hacer? ...
  #1 (permalink)  
Antiguo 13/08/2011, 18:16
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 776
Antigüedad: 9 años, 4 meses
Puntos: 7
Pregunta Poner imagen en un input

Hola a todos lo quenecesito es poner una imagen dentro de un input text, para que se vea mas bonito,

ejemplo:


Como se puede hacer?

Muchas gracias y saludos a todos
fede
  #2 (permalink)  
Antiguo 13/08/2011, 18:19
Avatar de carlospc  
Fecha de Ingreso: noviembre-2008
Ubicación: Huancayo/Perú
Mensajes: 240
Antigüedad: 8 años
Puntos: 12
Respuesta: Poner imagen en un input

usando css el atributo:

Cita:
background-image:(ruta/imagen.jpg);
o background: url(ruta/imagen.png);
Suerte
__________________
Mi web --> www.CarlosPC.net
  #3 (permalink)  
Antiguo 14/08/2011, 15:57
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 776
Antigüedad: 9 años, 4 meses
Puntos: 7
Respuesta: Poner imagen en un input

Hola, muchas gracias por la info.!!
Saludos
Fede
  #4 (permalink)  
Antiguo 14/08/2011, 16:58
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 776
Antigüedad: 9 años, 4 meses
Puntos: 7
Pregunta Respuesta: Poner imagen en un input

Buenas, No me sale, lo hice de esta manera.


Código CSS:
Ver original
  1. .inp1{
  2.     background-image:url(images/01.gif);
  3.     position:absolute;
  4.     color:#000;
  5.     width:292px;
  6.     height:25px;
  7.     top:15px;
  8.     left:499px;
  9.     border:none;
  10.     color:#ccc;
  11.     font-size:12px;
  12. }


Código HTML:
Ver original
  1. <input  class="inp1" name="Nombre" maxlength="20" type="text" value="nombre" />


y el resultado es el siguiente: la linea verde seria mi imagen, que es redondeada en las esquinas, pero sale el text cuadrado con la imagen dentro.... eso parece..

  #5 (permalink)  
Antiguo 14/08/2011, 17:21
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 2 meses
Puntos: 63
Respuesta: Poner imagen en un input

Tu le das la propiedad background-image, que hará poner un fondo a tu caja.

Eso no quiere decir que desaparecerán los bordes.

Quizas te puedas interesar las siguientes propiedades para crear escquinas redondeadas con CSS

Para firefox
-moz-border-radius: 0 12px 12px 0;
-moz-box-shadow: 2px 2px 5px #333;


Para Safari y Chrome
-webkit-border-radius: 0 12px 12px 0;
-webkit-box-shadow: 2px 2px 5px #333;


Y asignarles un border: 1px solid #0F7B12.
Los malo es que ma IE no hay ninguna propiedad asi.

Saludos
  #6 (permalink)  
Antiguo 14/08/2011, 18:22
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 6 años, 4 meses
Puntos: 202
Respuesta: Poner imagen en un input

Cita:
Iniciado por Batan Ver Mensaje
Tu le das la propiedad background-image, que hará poner un fondo a tu caja.

Eso no quiere decir que desaparecerán los bordes.

Quizas te puedas interesar las siguientes propiedades para crear escquinas redondeadas con CSS

Para firefox
-moz-border-radius: 0 12px 12px 0;
-moz-box-shadow: 2px 2px 5px #333;


Para Safari y Chrome
-webkit-border-radius: 0 12px 12px 0;
-webkit-box-shadow: 2px 2px 5px #333;


Y asignarles un border: 1px solid #0F7B12.
Los malo es que ma IE no hay ninguna propiedad asi.


Saludos
No sólo IE, hay otros navegadores para los que no se aplican igual esas propiedades. Hasta que no haya un standar esas propiedades habría que usarlas con "cautela". Ojalá llegue el día que se puedan usar los degradados y bordes redondeados de la misma forma.

Varias cosas fedefrankk.

1º Los gif no interpretan correctamente los píxeles con canal alpha, añadiendo pixeles blancos de fondo en caso de exitir a diferencia de los .png Lo comento por si estas usando una imagen con bordes con un alpha que sea diferente de 0 ó 100 estos aparecerán opacos.

2º Se supone que la imagen tiene los bordes redondeados ¿No? Jeje

3º¿Has comprobado que realmente te está cargando la imagen?

4º Permiteme unos cambios, ya que usas propiedades que sobran, que repites(como el color) y creo que sería más lógico usarlo como id no como clase. Lo puedes usar pero no sería lo más apropiado, las clases están para otras cosas.

Código CSS:
Ver original
  1. #inp1{
  2.         background:url("images/01.gif") no-repeat;
  3.         color:#000;
  4.         width:292px;
  5.         height:25px;
  6.         top:15px;       /*podrías sustituir los top y los left por un margin*/
  7.         left:499px;
  8.         border:none;
  9.         font-size:12px;
  10.     }

Código HTML:
Ver original
  1. <input  id="inp1" name="Nombre" maxlength="20" type="text" value="nombre" />
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #7 (permalink)  
Antiguo 15/08/2011, 18:07
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 776
Antigüedad: 9 años, 4 meses
Puntos: 7
Pregunta Respuesta: Poner imagen en un input

Hola como va, se que se pude hacer, acá dejo un ejemplo, no se en que le estoy fallando, creo, que el tamaño de la imagen es mas grande que el text, por eso el efecto de que aparecen las curvas... creo yo,,, y otra cosa en mi dibujo parece que la imagen esta dentro del text.. eso prodria ser?..

dejo un ejemplo que anda, no es mio, ,lo saque de google, pero no se adecua a lo mio..

www.quodigital.com/Formulario-CSS-imagenes.rar

Saludos a todos espero que les sirva..

fede
  #8 (permalink)  
Antiguo 15/08/2011, 22:04
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 7 años, 1 mes
Puntos: 34
Respuesta: Poner imagen en un input

Yo no me complicaria y usaria CSS3, IE 9 lo soporta.

Cita:
Iniciado por IEKK Ver Mensaje
No sólo IE, hay otros navegadores para los que no se aplican igual esas propiedades. Hasta que no haya un standar esas propiedades habría que usarlas con "cautela".
El standar lo hay (no terminado), otra cosa es que IE no lo acepte.


Un saludo
  #9 (permalink)  
Antiguo 16/08/2011, 11:24
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 6 años, 4 meses
Puntos: 202
Respuesta: Poner imagen en un input

Cita:
Iniciado por mariomon17 Ver Mensaje
Yo no me complicaria y usaria CSS3, IE 9 lo soporta.


El standar lo hay (no terminado), otra cosa es que IE no lo acepte.


Un saludo
Pero el problema no sólo es IE, que hayan propiedades para unos "X navegadores" y otras para "Y navegadores" demuestra que cada cual interpreta el estandar a su gusto y no sólo en cuanto a CSS.
Los colores de un .png en IE y Chrome(de menor calidad) no son iguales que en FF(Igual calidad)...
Y cuando el constraste(saturación) de los colores es alto la diferencia se nota y mucho, pues para IE y Chrome salen menos "brillantes".

Conclusión hasta el día de hoy hay que apañarselas y es más rápido y ocupa menos líneas añadir una imagen con el borde redondeado que usar estilos que no siempre van a funcionar.
Con un input puede pasar, pero imagina que se utilicen muchas de estas propiedades, entonces en algunos navegadores la página no se va a parecer en absoluto...

Es un error aplicar una CSS para un navegador o hacerlo funcionar sólo para la última versión, pues IE6, IE7, IE8, IE9, interpretan diferentes.
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #10 (permalink)  
Antiguo 16/08/2011, 18:02
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 7 años, 1 mes
Puntos: 34
Respuesta: Poner imagen en un input

En este caso puede ser un "arreglillo" eso del fondo. Pero (y lo dicen muchos especialistas) a veces hay que dejar de dar soporte a unas versiones de navegadores.
Esta propiedad de CSS3 (border-radius) es soportada por TODOS los navegadores, a excepcion de la versiones anteriores a la 9 de IE.

IE cada vez se usa menos, y esas versiones que no lo soportan son una infima parte del trafico de la web. Y en ese caso se pueden utilizar scripts (como Moderniz) que la adaptan para IE.

En este caso te doy la razon, es mas sencillo utilizar las imagenes.
  #11 (permalink)  
Antiguo 17/08/2011, 01:34
 
Fecha de Ingreso: agosto-2011
Mensajes: 6
Antigüedad: 5 años, 3 meses
Puntos: 1
Respuesta: Poner imagen en un input

por que no haces el borde tranparente
  #12 (permalink)  
Antiguo 20/08/2011, 17:36
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 776
Antigüedad: 9 años, 4 meses
Puntos: 7
Respuesta: Poner imagen en un input

Hola a todos, gracias por la repuestas, hacer el borde transparente del imput text?, es lo mismo que no tenga borde?.. borde.none;...
Gracias.!!!
Saludos
a todos
fede

Etiquetas: input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:46.