CSS применяет стиль к пустым входам ([value = ''])

Question

Я хотел бы применить специальный стиль ко всем входам в моей форме, которые являются обязательными и пустыми при этом.

Это работает, когда я пишу в моем CSS

input[required='required'] {
    bla-bla-bla;
}

но это не работает, когда я пишу

input[value=''] {
   bla-bla-bla;
}

Я знаю, что могу сделать это с помощью jQuery, но я бы хотел сделать это на чистом CSS, если это возможно.

Можно ли это сделать?

Заранее спасибо,
Тимофей.

Answer 1

Для этого вы можете использовать псевдоселот : недействительно - он будет соответствовать входу только в случае неудачной проверки браузера для элемента.Если вы установите элемент обязательный , он будет недействительным, пока он пуст.

И все браузеры модеров поддерживают этот CSS-класс: Совместимость браузера

input:invalid {
  border-color: red;
}

<input type="text" required>

Answer 2

Поиск пустых вводов в стиле css и обнаружение следующего:

Соответствие пустому полю ввода с использованием CSS

Вам необходимо использовать JavaScript.

Чтобы использовать стиль CSS, вам нужно будет ввести атрибут: value='' в HTML, но тогда CSS будет совпадать независимо от того, изменится ли значение в середине сеанса.

Answer 3

Если вам не нужно поддерживать более старые версии IE, вы можете установить для атрибута placeholder на входе что-то (может быть пробел, но должно быть что-то) и использовать :placeholder-shown для нацеливания на этот ввод.

<input type="text" class="custom-input" placeholder=" ">

.custom-input:placeholder-shown {
    /* Your rules */
}