cambiar de estilos a un input lleno

[Literman]

Hola a todos, ojala me puedan ayudar con esto.

Necesito cambiar de estilos a una caja de texto cuando ya esté lleno, es decir cuando ya tenga la información requerida antes de darle clic a enviar.

Adjunto una imagen con el ejemplo.



Saludos!

[herzbazi]

Iniciado por Literman

Hola a todos, ojala me puedan ayudar con esto.

Necesito cambiar de estilos a una caja de texto cuando ya esté lleno, es decir cuando ya tenga la información requerida antes de darle clic a enviar.

Adjunto una imagen con el ejemplo.



Saludos!

esto lo tienes que hacer con jquery , busca un poco sobre el tema y si no pues ya me dices y vemos como lo hacemos

[g3kdigital]

Se puede hacer con css, al menos sí es lo que entendí.

El valor de cada input trabajalo con placeholder y a estos asignale un estilo diferente al usado en los input.

Código HTML:

<form action="">
  <input type="text" placeholder="User"/>
  <input type="email" placeholder="Email"/>
  <input type="password" placeholder="password"/>
  <button>Recibir información</button>
</form>
 

Código CSS:

::-webkit-input-placeholder {
  color: red;
}
 
input
{
  color: blue;
}
 

En este pen esta más claro:

http://codepen.io/g3kdigital/pen/reaKrM?editors=1100

También puedes jugar con el input cuando esta seleccionado, usando input:focus.

Nota: placeholder es 91% compatible con todos los navegadores (según cainuse), el problema es que en cada navegador, su sintaxis es diferente.