Css input invisible, ayuda plis

hotdoguploader · 19 Jun 2015

Hola gente, estoy haciendo una web en bootstrar y necesito un input como este (Screenshot by Lightshot ), invisible y con el placeholder resaltado, alguien me podría ayudar? Tambíen decir que me dijeron que ponga este Material Designer para bootstrar (https://fezvrasta.github.io/bootstrap-material-design/#getting-started) que tiene un input que me sirve, pero o lo implemento mal o algo pasa porque le pongo los .css y se me va un poco al carajo todo. Gracias.

Cicklow · 19 Jun 2015

es un simple CSS... aca tienes tu code: Edit fiddle - JSFiddle

hotdoguploader · 19 Jun 2015

cicklow dijo:
es un simple CSS... aca tienes tu code: Edit fiddle - JSFiddle

Pues creo que el bootstra me machaca algo, mira como me queda. Screenshot by Lightshot

Cicklow · 19 Jun 2015

hotdoguploader dijo:
Pues creo que el bootstra me machaca algo, mira como me queda. Screenshot by Lightshot

pon el code que te di antes del </body> asi es el ultimo en aplicar CSS

hotdoguploader · 19 Jun 2015

cicklow dijo:
pon el code que te di antes del </body> asi es el ultimo en aplicar CSS

No me funciona tampoco, el css que manipulo lo tengo llamado el ultimo, tambien e probado con la etiqueta '<style>' en el head, y nada. Algo del bootstrar esta afectando, pff no se que hacer ya.

- - - Actualizado - - -

He estado probando y en un fichero limpio me funciona, pero usando el boostrap la classe 'row' o 'main' afectan al input y no se muestra como quiero. Alguna sugerencia?

Cicklow · 19 Jun 2015

hotdoguploader dijo:
No me funciona tampoco, el css que manipulo lo tengo llamado el ultimo, tambien e probado con la etiqueta '<style>' en el head, y nada. Algo del bootstrar esta afectando, pff no se que hacer ya.

- - - Actualizado - - -

He estado probando y en un fichero limpio me funciona, pero usando el boostrap la classe 'row' o 'main' afectan al input y no se muestra como quiero. Alguna sugerencia?

le meti el bootstrap + el main y row y me funciona bien... jejeje Edit fiddle - JSFiddle

hotdoguploader · 19 Jun 2015

cicklow dijo:
le meti el bootstrap + el main y row y me funciona bien... jejeje Edit fiddle - JSFiddle

Vale ya casi lo tengo, mira como va quedando (Screenshot by Lightshot) el tema era el background-color, lo e puesto en transparente y me funciona. Ahora necesitaría que la linea de abajo fuera blanca i las otras desparecieran, mas ho menos como esta en la foto que pase al principio.

Cicklow · 19 Jun 2015

hotdoguploader dijo:
Vale ya casi lo tengo, mira como va quedando (Screenshot by Lightshot) el tema era el background-color, lo e puesto en transparente y me funciona. Ahora necesitaría que la linea de abajo fuera blanca i las otras desparecieran, mas ho menos como esta en la foto que pase al principio.

mmm pues ese code te lo di... dale inspeccionar elemento a ver si esta el code del bootstrap o el que te pase...

hotdoguploader · 19 Jun 2015

cicklow dijo:
mmm pues ese code te lo di... dale inspeccionar elemento a ver si esta el code del bootstrap o el que te pase...

Si verdad ya lo tengo, para cambiar el color del valor? como pudo hacerlo? es que se be muy oscuro, mira de esta forma me queda (Screenshot by Lightshot). Pero muchas gracias por tu ayuda.

Cicklow · 19 Jun 2015

hotdoguploader dijo:
Si verdad ya lo tengo, para cambiar el color del valor? como pudo hacerlo? es que se be muy oscuro, mira de esta forma me queda (Screenshot by Lightshot). Pero muchas gracias por tu ayuda.

yo use el color #333 del plaseholder... vos cambialo a #fff (blanco) asi queda con tu fondo...

hotdoguploader · 19 Jun 2015

cicklow dijo:
yo use el color #333 del plaseholder... vos cambialo a #fff (blanco) asi queda con tu fondo...

No el -webkit-input-placeholder ya lo tengo en blanco, quiero decir a la hora de escribir fíjate que la letra esta en negro y a penas se puede diferenciar. En la foto anterior el nombre mira como esta, que esta en negro se puede confundir con el fondo.

Cicklow · 19 Jun 2015

hotdoguploader dijo:
No el -webkit-input-placeholder ya lo tengo en blanco, quiero decir a la hora de escribir fíjate que la letra esta en negro y a penas se puede diferenciar. En la foto anterior el nombre mira como esta, que esta en negro se puede confundir con el fondo.

aaa eso es: #algo{ color: #fff; }

hotdoguploader · 19 Jun 2015

cicklow dijo:
aaa eso es: #algo{ color: #fff; }

Vale ya esta muchas gracias por la ayuda 🙂 . Por si a alguien l interesa a qui esta el resultado:

Screenshot by Lightshot

Cicklow · 19 Jun 2015

hotdoguploader dijo:
Vale ya esta muchas gracias por la ayuda 🙂 . Por si a alguien l interesa a qui esta el resultado:

Screenshot by Lightshot

puedes agregarle mas cosas para que no sean con bordes redondeados y demas.. 🙂 (pero ya entra x tu parte jajaja)

Css input invisible, ayuda plis

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow