¿Aplicar diferentes estilos al campo de texto de entrada cuando está vacío (usando CSS)?

Question

Por ejemplo, un formulario recién cargado contiene un <input type="text"> que tiene un color de fondo verde. Una vez que el usuario ingresa un valor en el campo, me gustaría que fuera de color azul.

¿Es posible lograr esto simplemente usando CSS? Entiendo que existe el selector input[type='text'][value]. Sin embargo, esto no refleja ningún cambio en el formulario realizado por el usuario después de que se haya terminado de cargar, por lo que si el formulario se carga sin ningún valor, no se modificará independientemente de lo que haga el usuario.

Answer 1

Se podría dar el campo de texto del atributo required:

<input type="text" required /> 

y después comprobar la validez con CSS:

input:invalid { background: green; } 

o lo contrario (sólo diferentes para navegadores antiguos):

input:valid { background: blue; } 

Answer 2

Solo puede hacer esto usando JavaScript. Here's an example que usa jQuery.

Si desea cambiar el background-color en focus solamente, puede usar el pseudo-selector :focus. Here's an example of this.