Есть CSS-селектор для поля ввода, которое содержит ввод?

Question

Есть ли селектор css для формы ввода, которая содержит ввод?

Что я имею в виду, это поле ввода, в которое пользователь что-то набрал (PS: я знаю :valid и :invalidи они не то, что я ищу.)

Answer 1

Вы можете использовать селектор input [value], но это будет применяться только к dom при загрузке страницы, поэтому вам понадобится некоторый javascript для обработки изменения ввода (показано ниже).

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

for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', function(e) { 
    
    if (e.target.value !== "")
      e.target.classList.add('hasValue');    
    else
      e.target.classList.remove('hasValue');  
  })
}

input[value] {
  border: 1px solid red;
}

.hasValue {
  border: 1px solid red;
}

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

Answer 2

Используйте псевдокласс :placeholder-shown в сочетании с :not(). Идея состоит в том, чтобы изменить стиль ввода, когда нет заполнителя и когда нет заполнителя, это означает, что у вас есть какой-то контент.

Трюк работает только при наличии заполнителя, поэтому убедитесь, что вы хотя бы пустой:

input:not(:placeholder-shown) {
  background:pink;
}


input {
 border:1px solid;
}

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

Answer 3

Я не верю, что что-то существует, но есть спецификация, которая представляет собой рабочий проект, который добавляет :blank.Согласно спецификации это позволит вам узнать, когда поле ввода пусто.С этим вы легко справитесь и с обратным.

Но это всего лишь рабочий проект.Так что пока нет. Документы здесь .

Вы всегда можете использовать Javascript для добавления / удаления класса, основанного на существовании пользовательского ввода в то же время.