Coincidencia de un cuadro de entrada vacío usando CSS

¿Cómo aplico un estilo a un cuadro de entrada vacío? Si el usuario escribe algo en el campo de entrada, el estilo ya no debería aplicarse. ¿Es esto posible en CSS? Intenté esto:

input[value=""] 

Si solo se required el campo, puede ir con la input:valid

 #foo-thing:valid + .msg { visibility: visible!important; } 
    

En los navegadores modernos puede usar :placeholder-shown para apuntar a la entrada vacía (no confundir con ::placeholder ).

 input:placeholder-shown { border: 1px solid red; /* Red border only if the input is empty */ } 

Más información y soporte para el navegador: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

No hay selector en CSS que hace esto. Los selectores de atributos coinciden con los valores de los atributos, no con los valores calculados.

Deberías usar JavaScript.

La actualización del valor de un campo no actualiza su atributo de valor en el DOM, por eso su selector siempre coincide con un campo, incluso cuando no está realmente vacío.

En su lugar, use la pseudoclase invalid para lograr lo que desea, de esta manera:

 input:required { border: 1px solid green; } input:required:invalid { border: 1px solid red; } 
   

input[value=""] no funcionará

  

pero funcionó para mí en cromo con

  

Pero el estilo no cambiará tan pronto como alguien empiece a escribir. Entonces deberías usar js para eso.

Si no se necesitan navegadores heredados, puede usar una combinación de required , valid y invalid .

Lo bueno de usar esto es que los pseudo-elementos valid e invalid funcionan bien con los atributos de tipo de los campos de entrada. Por ejemplo:

 input:invalid, textarea:invalid { box-shadow: 0 0 5px #d45252; border-color: #b03535 } input:valid, textarea:valid { box-shadow: 0 0 5px #5cd053; border-color: #28921f; } 
    
 $('input#edit-keys-1').blur(function(){ tmpval = $(this).val(); if(tmpval == '') { $(this).addClass('empty'); $(this).removeClass('not-empty'); } else { $(this).addClass('not-empty'); $(this).removeClass('empty'); } }); 

en jQuery. Agregué una clase y diseñé con css.

 .empty { background:none; } 

Esto funcionó para mí:

html: – agrega el atributo requerido al elemento de entrada

  

css: – uso: selector no válido

 input.my-input-element:invalid { } 

Notas:

  • el valor en el elemento de entrada no es necesario.
  • Acerca de w3Schools.com es obligatorio , “Cuando está presente, especifica que se debe completar un campo de entrada antes de enviar el formulario”.

Esta pregunta podría haber sido formulada hace algún tiempo, pero como recientemente llegué a este tema buscando la validación del formulario del lado del cliente, y como el soporte :placeholder-shown está mejorando, pensé que lo siguiente podría ayudar a otros.

Utilizando la idea de Berend de utilizar esta pseudoclase de CSS4, pude crear una validación de formulario que solo se activó una vez que el usuario terminó de completarla.

Aquí hay ademo y explicación sobre CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

Me pregunto por las respuestas que tenemos claro atributo para obtener cuadros de entrada vacíos, eche un vistazo a este código

 /*empty input*/ input:empty{ border-color: red; } /*input with value*/ input:not(:empty){ border-color: black; } 

ACTUALIZAR

 input, select, textarea { border-color: @green; &:empty { border-color: @red; } } 

Más para tener una gran mirada en la validación

  input, select, textarea { &[aria-invalid="true"] { border-color: amber !important; } &[aria-invalid="false"], &.valid { border-color: green !important; } }