Итак, я тестировал свое приложение в разных браузерах, чтобы убедиться, что все работает, и когда я попал в Firefox, я был удивлен, что один из моих входов окружен большой красной рамкой-тенью.
Но что еще удивительнее в том, что красная тень исчезает, если вход пуст
После исследования я выяснил, что ввод имеет тип электронной почты, а не текст, как остальные входные данные.
Причина, по которой это стало для меня сюрпризом, заключается в том, что ни один из других браузеров, на которых я тестировал, ничего не делал для ввода (EVEN EDGE !!!), только в Chrome, когда я наводил курсор на ввод, он отображал мне сообщение:1025 *.
Очевидное исправление здесь состоит в том, чтобы изменить тип ввода на текст, но мои входы не находятся внутри тега формы, а вывод выбирается JS при нажатии кнопки.поэтому при такой настройке я не вижу никаких ошибок или, как в Chrome, появляется сообщение об ошибке вАтрибут itle при наведении.
Из документов MDN :
Псевдоклассы: valid и: invalid CSS автоматически применяются соответствующим образом для визуального обозначения того,текущим значением поля является действительный адрес электронной почты или нет.
Браузеры уже добавляют псевдоклассы в соответствии с состоянием ввода (действительный / недействительный) и позволяют разработчикамлегко реализовать стилизацию ошибок, как они считают нужным.
Почему Firefox настолько груб, что применяет стилизацию к ошибкам на входах, не сообщая об этом?
Я знаю, что поУстанавливая тип электронной почты, мы в основном говорим браузеру: «Эй, проверьте, чтобы этот ввод был действительным для меня, не так ли?»но применение псевдоклассов и применение красной большой рамки вокруг ввода - это две разные вещи.
Не лучше ли добавить стиль ТОЛЬКО, если вход находится внутри тега формы?после того, как все файлы с этим стилем называются Forms.css, имеет смысл сделать это таким образом, вместо того, чтобы применять его к входам, которые явно обрабатываются вне HTML.
Как я могубыть уверенным, что это не произойдет в будущем?
Должен ли я начать с добавления стиля в псевдокласс: invalid?потому что добавление просто box-shadow: ни один стиль не сокращает его, я должен быть более конкретным, или есть какой-то другой способ?