То :user-invalidје ЦСС псеудо-класа која је предложена у радном нацрту ЦСС Селецторс Левел 4 која бира елемент обрасца на основу тога да ли је вредност - као што је унео корисник - валидна када се упореди са оним што је наведено као прихваћена вредност у ХТМЛ ознака након што је крајњи корисник ступио у интеракцију са формом изван тог уноса. У ствари, :user-invalidназван је „псеудо-класа интеракције корисника“, јер је јединствен у идентификовању корисничке акције при одабиру елемента.
Узмите следеће ХТМЛ ознаке за основни образац са нумеричким пољем:
Бројчани опсег постављен ХТМЛ ознаком за улаз је између 1и 10али задата вредност је постављена на 11. То значи да је вредност неважећа чим се образац учита.
Међутим, :user-invalidпсеудо-класа ће ступити на снагу тек након што корисник стварно ступи у интеракцију са обрасцем након уноса у поље. Та интеракција је разлика између :user-invalidи :invalid. Исти принцип важи и за унете вредности обрасца које постављају :in-range, :out-of-rangeи :required.
Када се утврди да је вредност коју је корисник унео неважећа, можемо да изаберемо елемент:
input:user-invalid ( color: red; )Следећа слика илуструје различита стања између :validи :user-invalidна основу горњег ХТМЛ примера.
Оно што збуњује са овде како уско повезани :invalidи :user-invalidјесу. Ако се користе заједно, можда ће бити тешко разликовати ово двоје:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalidТешко је разликовати разлику између (у средини) и неважеће вредности коју је унео корисник (удесно)
Коришћење једног преко другог или различито обликовање између њих може се показати као боље корисничко искуство у стварном случају употребе.
Подршка прегледача
:user-invalid тренутно није подржан, али је предложен у радном нацрту ЦСС Селецторс Левел 4.
Фирефок користи префиксно нестандардно својство -moz-ui-invalidкоје усваја сличне стандарде.
Повезан
:invalid:valid
Више информација
- Спецификација ЦСС селектора нивоа 4
- МДН спецификација за
:-moz-ui-invalid