Css input invisível, ajuda por favor

hotdoguploader · 19/06/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/06/2015

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

hotdoguploader · 19/06/2015

cicklow disse:
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/06/2015

hotdoguploader disse:
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/06/2015

cicklow disse:
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/06/2015

hotdoguploader disse:
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/06/2015

cicklow disse:
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/06/2015

hotdoguploader disse:
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/06/2015

cicklow disse:
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/06/2015

hotdoguploader disse:
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/06/2015

cicklow disse:
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/06/2015

hotdoguploader disse:
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/06/2015

cicklow disse:
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/06/2015

hotdoguploader disse:
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 invisível, ajuda por favor

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

hotdoguploader

Cicklow

Tópicos similares