: not (: empty) Селектор CSS не працює?

Я переживаю час із цим конкретним селектором CSS, який не хоче працювати, коли я додаю :not(:empty)до нього. Здається, це чудово працює з будь-якою комбінацією інших селекторів:

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

Якщо я видалю :not(:empty)деталь, вона працює чудово. Навіть якщо я змінив на нього селектор, input:not(:empty)він все одно не буде вибирати поля введення, в які введено текст. Це не працює або мені просто заборонено користуватися :emptyв :not()селекторі?

Єдине, що я можу придумати, - це те, що браузери все ще кажуть, що елемент порожній, тому що в ньому немає дочірніх елементів, а лише "значення" на слово. Чи :emptyне має селектор окремих функціональних можливостей для вхідного елемента порівняно зі звичайним елементом? Однак це не здається ймовірним, оскільки використання :emptyполя та введення в нього чогось призведе до того, що альтернативні ефекти зникнуть (оскільки воно більше не порожнє).

Перевірено у Firefox 8 та Chrome.

Будучи порожнім елементом , <input>елемент вважається порожнім за визначенням HTML "порожній", оскільки модель вмісту всіх порожніх елементів завжди порожня . Тож вони завжди будуть відповідати :emptyпсевдокласу, незалежно від того, мають вони значення. Ось чому їх значення представлене атрибутом у початковому тегу, а не текстовим вмістом у початкових та кінцевих тегах.

Крім того, із специфікацій селекторів :

:emptyПсевдо-клас є елементом , який не має дітей взагалі. З точки зору дерева документів, лише вузли елементів і вузли вмісту (такі як текстові вузли DOM, вузли CDATA та посилання на сутності), дані яких мають ненульову довжину, повинні розглядатися як такі, що впливають на порожнечу;

Отже, input:not(:empty)ніколи не буде збігатися ні з чим у належному документі HTML. (Це все одно буде працювати в гіпотетичному XML-документі, який визначає <input>елемент, який може приймати текст або дочірні елементи.)

Я не думаю, що ви можете <input>динамічно стилізувати порожні поля, використовуючи лише CSS (тобто правила, що застосовуються, коли поле порожнє, і не один раз вводиться текст). Ви можете вибрати спочатку порожні поля, якщо вони мають порожній valueатрибут ( input[value=""]) або взагалі не мають атрибута ( input:not([value])), але це все.

Це можливо за допомогою вбудованого javascript onkeyup="this.setAttribute('value', this.value);"&input:not([value=""]):not(:focus):invalid

Демо: http://jsfiddle.net/mhsyfvv9/

input:not([value=""]):not(:focus):invalid{
  background-color: tomato;
}

<input 
  type="email" 
  value="" 
  placeholder="valid mail" 
  onchange="this.setAttribute('value', this.value);" />

Ви можете спробувати використовувати: placeholder-Показані ...

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>

немає великої підтримки, хоча ... канюс

Ви можете підійти до цього інакше; опустити використання :emptyпсевдо-класу та використовувати inputподії для виявлення значущого значення в <input>полі та стилізувати його відповідно:

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>

Пов’язані

• Ще одна публікація про події мутації DOM, де пропонується використовувати inputподії ( події мутації DOM тепер застаріли на рівні 4 DOM і були замінені спостерігачами мутації DOM).

Застереження: зауважте, що в даний часinput події є експериментальними і, мабуть, не широко підтримуються.

Оскільки заповнювач зникає при введенні, ви можете використовувати:

input:placeholder-shown{
    //rules for not empty input
}

чистий розчин css

input::-webkit-input-placeholder {
    opacity: 1;
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* Chrome <=56, Safari < 10 */
input:-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 4-18 */
input::-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 19-51 */
input:-ms-input-placeholder {
    opacity: 1;
    -ms-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* IE 10+ */
input::placeholder {
    opacity: 1;
    transition: opacity 0s;
    text-align: right;
}
/* Modern Browsers */

*:focus::-webkit-input-placeholder {
   opacity: 0;
   text-align: left;
}
/* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 4-18 */
*:focus::-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 19-50 */
*:focus:-ms-input-placeholder {
    opacity: 0;
    text-align: left;
}
/* IE 10+ */
*:focus::placeholder {
    opacity: 0;
    text-align: left;
}
/* Modern Browsers */

input:focus {
    text-align: left;
}

Ще одне чисте рішення CSS

.form{
  position:relative;
  display:inline-block;
}
.form input{
  margin-top:10px;
}
.form label{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    transition:all 1s ease;
}
input:not(:placeholder-shown) + label{
    top:-10px;
    opacity:1;
}

<div class="form">
    <input type="text" id="inputFName" placeholder="Firstname">
    <label class="label" for="inputFName">Firstname</label>
</div>
<div class="form">
    <input type="text" id="inputLName" placeholder="Lastname">
    <label class="label" for="inputLName">Lastname</label>
</div>

Це має працювати в сучасних браузерах:

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

Він вибирає всі входи з атрибутом value, а потім вибирає входи з непорожнім значенням.

input:not([value=""])

Це працює, оскільки ми вибираємо вхідні дані лише тоді, коли немає порожнього рядка.

input:not(:invalid){
 border: 1px red solid;
}

// or 

input:not(:focus):not(:invalid){
 border: 1px red solid;
}