: потребител-невалиден - CSS-трикове

Anonim

Това :user-invalidе CSS псевдоклас, който се предлага в работния проект на CSS Selectors Level 4, който избира елемент на формуляр въз основа на това дали стойността - както е въведена от потребител - е валидна, когато е проверена спрямо това, което е посочено като приета стойност в HTML маркировката, след като крайният потребител взаимодейства с формуляра извън този вход. Всъщност :user-invalidе наречен „Псевдокласът за взаимодействие с потребителя“, тъй като е уникален при идентифициране на потребителско действие при избора на елемент.

Вземете следната HTML маркировка за основна форма с числово поле:

Количество:

Числовият диапазон, зададен от HTML маркировката за входа, е между 1и, 10но стойността по подразбиране е зададена на 11. Това означава, че стойността е невалидна веднага щом формата се зареди.

Псевдокласът обаче :user-invalidще влезе в сила едва след като потребителят действително взаимодейства с формуляра след въвеждането му в полето. Това взаимодействие е разликата между :user-invalidи :invalid. Същият принцип се прилага за въведени стойности на формуляри, които са зададени от :in-range, :out-of-rangeи :required.

След като стойността, която потребителят е въвел, е определена като невалидна, можем да изберем елемента:

input:user-invalid ( color: red; )

Следващото изображение илюстрира различните състояния между :validи :user-invalidвъз основа на HTML пример по-горе.

Разликата между валидна стойност (вляво) и невалидна стойност, въведена от потребител след взаимодействие с формуляра.

Объркващото тук е колко са тясно свързани :invalidи какви :user-invalidса. Ако се използват заедно, може да е трудно да се разграничат двете:

input:invalid ( color: red; ) input:user-invalid ( color: red; )
Разликата между :invalid(в центъра) и невалидна стойност, въведена от потребител (вдясно), може да бъде трудна за разграничаване

Използването на едно върху друго или с различен стил между двете може да се окаже по-добро потребителско изживяване в реалния случай на употреба.

Поддръжка на браузър

:user-invalid понастоящем не се поддържа, но се предлага в работния проект на CSS Selectors Level 4.

Firefox използва префиксирана нестандартна собственост, -moz-ui-invalidкоято приема подобни стандарти.

Свързани

  • :invalid
  • :valid

Повече информация

  • Спецификация на CSS селектори от ниво 4
  • Спецификация на MDN за :-moz-ui-invalid