Стилизация полей паролей в CSS - PullRequest
Новая
       57

Стилизация полей паролей в CSS

40 голосов
/ 28 июля 2011

У меня небольшая проблема со шрифтами в моей таблице стилей.

Это мой 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, которая изменяет форму точек пароля.Как я могу избавиться от этого и иметь одинаковый стиль в каждом браузере?

Спасибо!

РЕДАКТИРОВАТЬ: Я только что нашел что-то любопытное: по умолчанию браузеры 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;
 }

Ответы [ 4 ]

28 голосов
/ 28 июля 2011

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

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

6 голосов
/ 19 октября 2016

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

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

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

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

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

input[type="password"] {
    font-family: caption;
}
4 голосов
/ 15 апреля 2018

Когда мне нужно было создать похожие точки при вводе [пароль], я использую пользовательский шрифт в base64 (с 2 глифами, см. Выше 25CF и 2022)

Стили SCSS 

@font-face {
  font-family: 'pass';
  font-style: normal;
  font-weight: 400;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format('woff');
}

input.password {
  font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif ;
  font-size: 18px;
  &::-webkit-input-placeholder {
    transform: scale(0.77);
    transform-origin: 0 50%;
  }
  &::-moz-placeholder {
    font-size: 14px;
    opacity: 1;
  }
  &:-ms-input-placeholder {
    font-size: 14px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
  }

После этого я получил идентичный ввод для ввода [пароль]

3 голосов
/ 28 апреля 2012

Я обнаружил, что могу немного улучшить ситуацию с помощью 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 */
...