Верх страницы
Обложка к записи Меняем форму значков для полей ввода пароля
Время для прочтения: 0 мин. 3 сек.

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

По умолчанию для полей 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

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

2 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Валерий
10 лет назад

Немного нубский вопрос, как и я сам… а можно вместо квадратов-кружков делать вывод изображения, скажем jpg или gif?

Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы