examples - title html

: el selector de CSS no(: vacío) no funciona?

Question

Estoy teniendo un gran problema con este selector de CSS particular que no quiere funcionar 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 la input:not(:empty) , aún no seleccionará campos de entrada que tengan texto escrito en ellos. ¿Está roto o no puedo usarlo :empty dentro de un selector :not() ?

La única otra cosa en la que puedo pensar es que los navegadores todavía dicen que el elemento está vacío porque no tiene hijos, solo un "valor" por decir. ¿El selector :empty no tiene funcionalidad separada para un elemento de entrada versus 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.

Answer 1

Al ser un elemento vacío , un elemento <input> se considera empty por la definición HTML de "vacío", ya que el modelo de contenido de todos los elementos vacíos está siempre vacío . Por lo tanto, siempre coincidirán con la pseudoclase :empty , tengan o no un valor. Esta es también la razón por la cual 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 finalización.

Además, de la especificación Selectores :

La pseudoclase :empty representa un elemento que no tiene hijos en absoluto. En términos del árbol de documentos, solo los nodos de elementos y los nodos de contenido (como los nodos de texto DOM, los nodos CDATA y las referencias de entidad) cuyos datos tienen una longitud distinta de cero deben considerarse como que afectan el vacío;

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

No creo que pueda modificar <input> campos <input> vacíos dinámicamente con solo CSS (es decir, reglas que se aplican cada vez que un campo está vacío y no se ingresa el texto). Puede seleccionar inicialmente los campos vacíos si tienen un atributo de value vacío ( input[value=""] ) o si carecen del atributo por completo ( input:not([value]) ), pero eso es todo.

Answer 2

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

Demostración: 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);" />

Answer 3

Esto debería funcionar en los navegadores modernos:

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

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

Answer 4

Puede abordar esto de manera diferente; omita el uso de :empty pseudo-clase :empty y utilice eventos de input para detectar un valor significativo en el campo <input> y ajústelo según corresponda:

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

• Otra publicación sobre eventos de mutación DOM, sugiriendo el uso de eventos de input (los eventos de mutación DOM ahora están en desuso en el nivel DOM 4, y han sido reemplazados por los observadores de mutación DOM).

Descargo de responsabilidad: tenga en cuenta que input eventos de input son actualmente experimentales , y probablemente no sean ampliamente compatibles.

Answer 5

Puedes 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

Answer 6

.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>

Answer 7

input:not([value=""])

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