input totalmente transparente

Alexcore · #1 (**permalink**) 29/06/2009, 12:35

Hola, para hacer un input totalmente transparente que debo poner entre:

Código:

<input type= y />

La idea es la siguiente: Es un input para logearse, pero en vez de colocar el input tradicional quiero poner una imagen detras, y el input siendo transparente va a parecer como si escribiera encima de la imagen.

Ayuda porfavor :(

gioramies · #2 (**permalink**) 29/06/2009, 12:43

Hola. Lo primero que debes hacer es colocarle a tu input una clase, de esta forma:

Código HTML:

<input type="text" name="nombre_input" class="mi_clase_input" />

Luego debes mediante css asignarle al input una imagen de fondo, así:

Código HTML:

.mi_clase_input {
     background: url(´ruta_de_la_imagen/imagen.png´);
}

Es un ejemplo, espero logres adaptarlo a lo que necesitas. Saludos

kseso? · #3 (**permalink**) 29/06/2009, 12:43

Código css:

Ver originalinput {
border: 0;
background: transparent url(ruta_a_tu_imagen.ext) no-repeat; /*o el valor que necesites*/
}

EDITO:

El tipo de la foto me tiene manía

Aresillo · #4 (**permalink**) 29/06/2009, 12:53

creo que se a lo que te refieres...
algo como lo que tiene esta web: http://web.rcarcamonster.com/ en el login y contraseña...
Para hacer eso no hace falta lo que propones... simplemente en el css del input le pones un background que es el icono y le pones un margin que sea suficiente como para que no escribas encima...

Saludos!

Aresillo · #5 (**permalink**) 29/06/2009, 12:55

vaya yo me he liado por aquí y también he chocado... pero vamos que te lo hemos resuelto tres!!!

Alexcore · #6 (**permalink**) 29/06/2009, 13:04

El css va despues del codigo input? Ayuda porfavor, no soy partidario del css xD

gioramies · #7 (**permalink**) 29/06/2009, 13:07

El css lo puedes colocar en una archivo externo o dentro del archivo html dentro de las etiquetas <style> que se colocan en la sección <head>. Puedes leer más en librosweb.

kseso? · #8 (**permalink**) 29/06/2009, 13:14

Cita:

Iniciado por Alexcore

El css va despues del codigo input? Ayuda porfavor, no soy partidario del css xD

Pues no has venido al mejor foro a decir eso, hereje

pistonasos · #9 (**permalink**) 06/07/2009, 00:15

Hola alexcore,fijate èste còdigo que estoy muy seguro que te va a funcionar,yo lo tengo en mi web i corre bien:

En el HTML va lo siguiente:

Código:

<html>
<head>
<tittle></title>
</head>
<body>
<h2>Hola Mundo</h2>
<h5>Prueva De Transparencia:</h5>
  <div>
     <form>
          <input type="text" class="campo">
     </form>
  </div>
</body>
</html>

Y en el CSS:

Código:

.campo{border:0px solid;background-color:transparent;color:white}

Te aviso,en el còdigo CSS,en la clase .campo,le podès cambiar el color de letra,en donde dice:color:el color que quieras ponerle.Yo te recomiendo lo siguiente:Si la imagen que vas a tener en el fondo del input,es muy clara,te combiene ponerle color negro u otro que resalte a comparaciòn de los colores de la imagen de fondo ya que esto afecta a la lectura de los usuarios que visitan tu web,almenos que quieras que se queden ciegos,jejeje.
Fijate,que en el còdigo html,despuès de <head> y antes de </head>,podès poner un còdigo para llamar a un archivo que contenga los estilos CSS,que obviamente,este archivo va a tener su nombre y ,al final, ".css" asì: Cualquier Documento.css.para llamarlo,el còdigo es asì:

Código:

<link rel="stylesheet" href="ruta" type="text/css" media="all">

Espero que te halla servido y que no se me hagan ampollas en las manos...