Меняем форму значков для полей ввода пароля
По умолчанию для полей type=password браузер рисует закрашенные кружки вместо символов. Что делать, если кружки надо заменить, например, на квадраты. Тут нам на помощь придет CSS3.
В CSS3 есть замечательное свойство 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;
}
Получим квадраты вместо обычных символов
| До | После |
 |
 |
Немного нубский вопрос, как и я сам… а можно вместо квадратов-кружков делать вывод изображения, скажем jpg или gif?
Валерий, смотрите сводную таблицу — там указаны все возможные значения. Изображений в поддержке пока нет.