Hacer coincidir 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 el campo es required, podrías ir coninput:valid

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

 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

Ver en vivo en jsFiddle

O negar usando #foo-thing:invalid(crédito a @SamGoody)

En los navegadores modernos, puede usar :placeholder-shownpara apuntar a la entrada vacía (que no debe confundirse con ::placeholder).

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

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

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

Tendrías que 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 en realidad no está vacío.

En su lugar, use la invalidpseudoclase para lograr lo que desea, así:

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

<input required type="text" value="">

<input required type="text" value="Value">

input[value=""], input:not([value])

funciona con:

<input type="text" />
<input type="text" value="" />

Pero el estilo no cambiará tan pronto como alguien comience a escribir (necesita JS para eso).

Si no se necesita apoyo navegadores antiguos, se puede usar una combinación de required, validy invalid.

Lo bueno de usar este es el validy invalidpseudo-elementos funcionan bien con los atributos de tipo de 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 type="email" name="email" placeholder="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

Para referencia, JSFiddle aquí: http://jsfiddle.net/0sf6m46j/

$('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í:

Para el HTML, agregue el requiredatributo al elemento de entrada

<input class="my-input-element" type="text" placeholder="" required />

Para el CSS, use el :invalidselector para apuntar a la entrada vacía

input.my-input-element:invalid {

}

Notas:

• Acerca requiredde w3Schools.com : "Cuando está presente, especifica que se debe completar un campo de entrada antes de enviar el formulario".

Es posible que esta pregunta se haya hecho hace algún tiempo, pero como recientemente llegué a este tema en busca de la validación de formularios del lado del cliente, y como el :placeholder-shown soporte está mejorando, pensé que lo siguiente podría ayudar a otros.

Utilizando la idea de Berend de usar esta pseudoclase CSS4, pude crear una validación de formulario solo activada una vez que el usuario terminó de llenarla.

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

Si está contento de no admitir IE o pre-Chromium Edge (lo que podría estar bien si está usando esto para una mejora progresiva), puede usarlo :placeholder-showncomo Berend ha dicho. Tenga en cuenta que para Chrome y Safari realmente necesita un marcador de posición no vacío para que esto funcione, aunque un espacio funciona.

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>

Me funcionó agregar un nombre de clase a la entrada y luego aplicar reglas CSS a eso:

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

Me preguntan las respuestas, tenemos un atributo claro 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 por tener un excelente aspecto en la validación

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

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

Me doy cuenta de que este es un hilo muy antiguo, pero las cosas han cambiado un poco desde entonces y me ayudó a encontrar la combinación correcta de cosas que necesitaba para solucionar mi problema. Así que pensé en compartir lo que hice.

El problema era que tenía que aplicar el mismo CSS para una entrada opcional si se llenaba, como lo había hecho para un llenado requerido. El css utilizó la clase psuedo: válida, que aplicó el css en la entrada opcional también cuando no se rellenó.

Así es como lo arreglé;

HTML

<input type="text" required="required">
<input type="text" placeholder="">

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}