Можливо, за допомогою звичайних застережень CSS і якщо HTML-код можна змінити. Якщо ви додасте required
атрибут до елемента, то елемент буде відповідати :invalid
чи :valid
залежно від того, чи значення елемента керування порожнє чи ні. Якщо елемент не має value
атрибута (або він має value=""
), значення елемента керування спочатку порожнє і стає непорожнім, коли вводиться будь-який символ (навіть пробіл).
Приклад:
<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
Псевдокласифікований :valid
і:invalid
визначені лише у документах CSS рівня робочого проекту, але підтримка досить широко поширена в браузерах, за винятком того, що в IE вона поставляється з IE 10.
Якщо ви хочете зробити «порожніми» значеннями, що складаються лише з пробілів, ви можете додати атрибут pattern=.*\S.*
.
Наразі немає селектора CSS, який би безпосередньо визначав, чи має вхідне управління непорожнє значення, тому нам потрібно це робити побічно, як описано вище.
Як правило, селектори CSS стосуються розмітки або, в деяких випадках, властивостей елементів, встановлених сценарієм (JavaScript на стороні клієнта), а не дії користувача. Наприклад, :empty
відповідає елементу з порожнім вмістом у розмітці; всі input
елементи в цьому сенсі неминуче порожні. Селектор [value=""]
перевіряє, чи має елемент value
атрибут у розмітці і чи є порожнє рядок як його значення. А :checked
та :indeterminate
подібні речі. На них не впливає фактичне введення користувача.