В этой статье мы с вами научимся избавляться от псевдоэлементов глаз и крестика из полей ввода логина и пароля. Майкрософт решили начиная с версии IE 10 в поля типов text и password добавлять псевдоэлементы. Когда работаешь на большом проекте, и кнопки «глаза» у тебя свои, то элементы майкрософта тут совсем не в тему.
CSS — Убираем псевдоэлементы EDGE и IE 10+
В целом это удобно, приятно и не требует дополнительных строк кода. Но когда проект имеет везде свои иконки и микроэлементы графики, которые граничат с псевдоэлементами от компании майкрософт — начинаются пляски с бубном. Честно говоря, это сильно бесит, раздражает и приносит огромное количество неудобств и негодований. В итоге, для того, чтобы избавиться от этих элементов необходимо в main.css (если у вас таковой имеется) прописать следующее:
|
1 2 3 4 5 6 7 8 9 |
/* удаление иконки очистки поля в IE */ input[type="text"]::-ms-clear { display: none; } /* удаление иконки отображения пароля в IE */ input[type="password"]::-ms-reveal { display: none; } |
И все! Самое главное это написать стили в нужном месте, иначе ничего не получится.
Надеюсь, что эта информация вам помогла справиться с вашей проблемой. Кстати, забыл подметить, в браузерах chrome, firefox, safari, opera и т.д. Эти иконки не отображаются! Они работают исключительно в Microsoft продуктах.
Спасибо за внимание, и не забывайте про нашу группу в ВК и канал на ютубчике!