Меняем форму значков для полей ввода пароля

По умолчанию для полей type=password браузер рисует закрашенные кружки вместо символов. Что делать, если кружки надо заменить, например, на квадраты. Тут нам на помощь придет CSS3.

В CSS3 есть замечательное свойство text-security, при помощи которого мы можем осуществить задуманное.

Свойство text-security может принимать значения:
Значение Описание
circle кольцо
disk круг
square квадрат
none значки не используются

Допустим, у нас есть поле ввода с классом password:

<input type="text" class="password" placeholder="Пароль" />

Тогда, дописав в CSS всего одно правило:

input[type=password],
input.password {
    -webkit-text-security:square !important;
    -moz-text-security:square !imporant;
    -o-text-security: square !imporant;
    text-security:square !important;
}

Получим квадраты вместо обычных символов

До После
without-text-security text-security

Ссылки

Источник: https://www.kobzarev.com/makeup/change-the-shape-of-the-icons-to-the-password-field/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: