Usar imagen como INPUT TYPE=TEXT

[Iodem Asakura]

Saludos a todos.

Quiero personalizar mis cuadro de texto, de manera que puedan tener la forma que yo quiera, un poco ovalada, con algo de color, una imagencita dentro del cuadro y cosas por el estilo. El hecho es que no me salga ese simple rectangulo. Como puedo hacerlo?

No se si es aqui que debo hacer esa pregunta, asi que redirijanla al lugar mas adecuado.

Estaba pensando que la unica manera de hacer eso era con flash, pero realmente no estoy seguro. Por eso no se donde poner esta pregunta.

Gracias de antemano

[deirdre]

Hola Iodem Asakura

Es complicado esto que planteas porque un cuadro de texto siempre es una forma cuadrada o rectangular con un tamaño determinado por píxeles. Pero sí puedes contruir tus formas dibujando lo que quieras y colocando ese dibujo (corazón, ovalado, incluso los dibujitos que quieras poner) como fondo de un div que se funda, desde el punto de vista del color o de la forma, con el fondo de la página, y dentro de ese div colocar tus cuadros de texto que pueden llevar también un fondo que tenga continuidad con el fondo del div antes mencionado, o que no teniendo continuidad proporcionen un contraste divertido, etc.

Es sólo asunto de creatividad y una vez creados los dibujos maquetarlos utilizando xhtml y css.

Si concretas un poco más, la respuesta también puede ser más concreta.

Otra cosa bien distinta es utilizar html, css y javascript para darle un aspecto más "moderno" a los campos de formularios (esquinas redondeadas, bordes de color, etc.). Aquí alguna información.

Bye

[danneg]

es puro css

Código:

input.text {
   border-radius: 8px;
   background-image: ur(imagen.ext);
   border: 1px solid #000;
   padding: 5px;
   font-family: fuente;
   font-size: 14px;
}

y puedes usar los atributos mas coloquiales para las capas, y de igual forma sirve, y tambien para el resto de los inputs y txtarea

[jomaruro]

Hola:

Iniciado por danneg

es puro css

Código:

input.text {
   border-radius: 8px;
   background-image: ur(imagen.ext);
   border: 1px solid #000;
   padding: 5px;
   font-family: fuente;
   font-size: 14px;
}

y puedes usar los atributos mas coloquiales para las capas, y de igual forma sirve, y tambien para el resto de los inputs y txtarea

Si, es puro CSS3, no soportado por todos los navegadores todavía.

Saludos.

[danneg]

solo IE y no se si algun otro no aceptan borber-radius, las demas opciones hasta IE6 los soporta

[dfiesta]

Iniciado por danneg

solo IE y no se si algun otro no aceptan borber-radius, las demas opciones hasta IE6 los soporta

Solo ie6 y anteriores no soportan border radius, igualmente hay una forma por css tambien que podes usar y es la que uso yo en mi web (podes verla en mi perfil), ya que lo que hice fue poner en css un background de fondo al form, donde es una imagen con puntas redondeadas y listo