:not (: empty) El selector CSS no funciona?

Estoy teniendo un heck de un tiempo con este selector CSS en particular que no quiere trabajar cuando agrego :not(:empty) a él. Parece funcionar bien con cualquier combinación de los otros selectores: 

input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }

Si elimino la parte :not(:empty), funciona bien. Incluso si cambio el selector a input:not(:empty) todavía no seleccionará los campos de entrada que tienen texto escrito en ellos. ¿Está roto o simplemente no se me permite usar :empty dentro de un selector :not()?

La única otra cosa que se me ocurre es que los navegadores siguen diciendo que el elemento está vacío porque no tiene hijos, solo un "valor" por decir. ¿El selector :empty no tiene una funcionalidad separada para un elemento de entrada frente a un elemento regular? Sin embargo, esto no parece probable porque usar :empty en un campo y escribir algo en él hará que los efectos alternativos desaparezcan (porque ya no está vacío).

Probado en Firefox 8 y Chrome.

Author: BoltClock, 2011-12-27
Source

7 answers

Siendo un elemento void, un elemento <input>se considera vacíopor la definición HTML de "vacío", ya que el modelo de contenido de todos los elementos void siempre está vacío. Así que siempre coincidirán con la pseudo-clase :empty, tengan o no un valor. Esta es también la razón por la que su valor está representado por un atributo en la etiqueta de inicio, en lugar de contenido de texto dentro de las etiquetas de inicio y fin.

También, de los selectores spec :

El :empty pseudo-clase representa un elemento que no tiene hijos en absoluto. En términos del árbol del documento, solo los nodos de elemento y los nodos de contenido (como los nodos de texto DOM, los nodos CDATA y las referencias de entidades) cuyos datos tienen una longitud distinta de cero deben considerarse que afectan al vacío;

En consecuencia, input:not(:empty) nunca coincidirá con nada en un documento HTML apropiado. (Todavía funcionaría en un documento XML hipotético que define un elemento <input> que puede aceptar texto o elementos secundarios.)

I no crea que puede estilizar campos vacíos <input> dinámicamente usando solo CSS (es decir, reglas que se aplican cuando un campo está vacío, y no una vez que se ingresa el texto). Puede seleccionar inicialmente campos vacíos si tienen un atributo value vacío (input[value=""]) o carecen del atributo por completo (input:not([value])), pero eso es todo.

 115
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-22 04:52:20

Es posible con javascript en líneaonkeyup="this.setAttribute('value', this.value);" & input:not([value=""]):not(:focus):invalid

Demo: http://jsfiddle.net/mhsyfvv9 / 

input:not([value=""]):not(:focus):invalid{
  background-color: tomato;
}
<input 
  type="email" 
  value="" 
  placeholder="valid mail" 
  onkeyup="this.setAttribute('value', this.value);" />
 30
Author: Muhammed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-12 12:54:52

Puede intentar usar :placeholder-shown...

input {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  border: 2px solid lightblue;
  outline: 0;
  font-weight:bold;
  transition: border-color 200ms;
  font-family: sans-serif;
}

.validation {
  opacity: 0;
  font-size: 12px;
  font-family: sans-serif;
  color: crimson;
  transition: opacity;
}

input:required:valid {
  border-color: forestgreen;
}

input:required:invalid:not(:placeholder-shown) {
  border-color: crimson;
}

input:required:invalid:not(:placeholder-shown) + .validation {
  opacity: 1;
}

  
<input type="email" placeholder="e-mail" required>
<div class="validation">Not valid</span>

Sin embargo, no hay gran apoyo... caniuse

 16
Author: Gijs Erenstein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-13 21:25:59

Puede abordar esto de manera diferente; omita el uso de la pseudo-clase :empty y utilice eventos input para detectar un valor significativo en el campo <input> y estilo en consecuencia: 

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.addEventListener('input', function() {
    var bg = this.value ? 'green' : 'red';
    this.style.backgroundColor = bg;
  });
}
body {
  padding: 40px;
}
#inputList li {
  list-style-type: none;
  padding-bottom: 1.5em;
}
#inputList li input,
#inputList li label {
  float: left;
  width: 10em;
}
#inputList li input {
  color: white;
  background-color: red;
}
#inputList li label {
  text-align: right;
  padding-right: 1em;
}
<ul id="inputList">
  <li>
    <label for="username">Enter User Name:</label>
    <input type="text" id="username" />
  </li>
  <li>
    <label for="password">Enter Password:</label>
    <input type="password" id="password" />
  </li>
</ul>

Relacionado

Descargo de Responsabilidad: tenga en cuenta que input los eventos son actualmente experimentales, y probablemente no estén ampliamente soportados.

 8
Author: Eliran Malka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:23 

.floating-label-input {
  position: relative;
  height:60px;
}
.floating-label-input input {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
  border: 0 none;
  outline: none;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}
.floating-label-input label {
  position: absolute;
  top: calc(50% - 5px);
  font-size: 22px;
  left: 0;
  color: #000;
  transition: all 0.3s;
}
.floating-label-input input:focus ~ label, .floating-label-input input:focus ~ label, .floating-label-input input:valid ~ label {
  top: 0;
  font-size: 15px;
  color: #33bb55;
}
.floating-label-input .line {
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: #000;
  left: 0;
}
.floating-label-input .line:after {
  content: "";
  display: block;
  width: 0;
  background: #33bb55;
  height: 1px;
  transition: all 0.5s;
}
.floating-label-input input:focus ~ .line:after, .floating-label-input input:focus ~ .line:after, .floating-label-input input:valid ~ .line:after {
  width: 100%;
}
<div class="floating-label-input">
      <input type="text" id="id" required/>
      <label for="id" >User ID</label>
      <span class="line"></span>
</div>
 6
Author: Amit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-22 12:28:53

Esto debería funcionar en los navegadores modernos: 

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

Selecciona todas las entradas con atributo value y luego selecciona entradas con valor no vacío entre ellas.

 -1
Author: Andrew Kondratev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-18 23:17:01 
input:not([value=""])

Esto funciona porque estamos seleccionando la entrada solo cuando no hay una cadena vacía.

 -1
Author: Anton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-21 21:03:51