Poner imagen en un input

[fedefrankk]

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

[carlospc]

usando css el atributo:

background-image:(ruta/imagen.jpg);
o background: url(ruta/imagen.png);

Suerte

[fedefrankk]

Hola, muchas gracias por la info.!!
Saludos
Fede

[fedefrankk]

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

Código CSS:

.inp1{
    background-image:url(images/01.gif);
    position:absolute;
    color:#000;
    width:292px;
    height:25px;
    top:15px;
    left:499px;
    border:none;
    color:#ccc;
    font-size:12px;
}
 

Código HTML:

<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..

[Batan]

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

[IEKK]

Iniciado por Batan

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:

#inp1{
        background:url("images/01.gif") no-repeat;
        color:#000;
        width:292px;
        height:25px;
        top:15px;       /*podrías sustituir los top y los left por un margin*/
        left:499px;
        border:none;
        font-size:12px;
    }
 

Código HTML:

<input  id="inp1" name="Nombre" maxlength="20" type="text" value="nombre" />
 

[fedefrankk]

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

[mariomon17]

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

Iniciado por IEKK

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

[IEKK]

Iniciado por mariomon17

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.

[mariomon17]

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.

[allpologies]

por que no haces el borde tranparente

[fedefrankk]

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