Поля пароля стиля в CSS

Я испытываю незначительную проблему со шрифтами в моей таблице стилей.

Это мой CSS:

body
{
  ...
  font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}

#wrapper_page
{
  ...
  font-size: 1.2em;
}

input, select, textarea
{
  ...
  font: bold 100% "Lucida Sans Unicode",sans-serif;
}

И это результат:

browser password fields

Я думаю, что есть внутренняя настройка css, где-то, на веб-китах, которые изменяют форму точек паролей. Как я могу избавиться от него и иметь один и тот же стиль в каждом браузере?

Спасибо!

EDIT: я просто нашел кое-что любопытное: по умолчанию браузеры webkit применяют этот CSS для полей пароля:

input[type="password"]
{
  -webkit-text-security: disc;
}

И это то, что заменяет классическую миддот. Я попытался настроить его на круг или нет, но я не могу получить что-то похожее на то, что показывают другие браузеры.

ИЗМЕНИТЬ: Я НАЙДЕТ РЕШЕНИЕ. Если вы используете шрифт "Lucida Sans Unicode" для своего сайта, эта проблема! Единственный шрифт, который правильно эмулирует поле пароля большими точками других браузеров, - это Verdana, смешанный с небольшим интервалом между буквами. Итак, для Opera и Webkit используйте следующий код, чтобы исправить его:

.opera input[type="password"],
.webkit input[type="password"]
{
  font: large Verdana,sans-serif;
  letter-spacing: 1px;
 }

Ответы

Ответ 1

Лучшее, что я могу найти, это установить input[type="password"] {font:small-caption;font-size:16px}

Демо: http://jsfiddle.net/x5CCf/

Ответ 2

Проблема заключается в том, что (в 2016 году) для поля пароля Firefox и Internet Explorer используют символ "Черный круг" (●), который использует кодовую точку Unicode 25CF, но Chrome использует символ "Bullet" (•), в котором используется кодовая точка Unicode 2022.

Как вы можете видеть, даже в шрифте StackOverflow два символа имеют разные размеры.

Шрифт, который вы используете, "Lucida Sans Unicode", имеет еще большее несоответствие между размерами этих двух символов, что приводит к тому, что вы замечаете разницу.

Простым решением является использование шрифта, в котором оба символа имеют одинаковые размеры.

Таким образом, исправление может заключаться в использовании шрифта по умолчанию в браузере, который должен визуально отображать символы в поле пароля:

input[type="password"] {
    font-family: caption;
}

Ответ 3

Я обнаружил, что немного улучшил ситуацию с помощью CSS, посвященного Webkit (Safari, Chrome). Тем не менее, мне пришлось установить фиксированную ширину и высоту поля, потому что изменение шрифта изменит размер поля.

@media screen and (-webkit-min-device-pixel-ratio:0){ /* START WEBKIT */
  INPUT[type="password"]{
  font-family:Verdana,sans-serif;
  height:28px;
  font-size:19px;
  width:223px;
  padding:5px;
  }
} /* END WEBKIT */