web-dev-qa-db-ja.com

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

パスワードドットの形状を変更するWebkitのどこかに、内部css設定があると思います。どのようにしてそれを取り除き、すべてのブラウザで同じスタイルを使用できますか？

ありがとう！

編集：私はちょうど奇妙なものを見つけました：デフォルトでは、WebkitブラウザはこのCSSをパスワードフィールドに適用します：

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

そして、それが古典的なミッドドットに取って代わるものです。サークルまたはなしに設定しようとしましたが、他のブラウザーで表示されるものと同様のものを取得できません。

編集：私は解決策を見つけました。 Webサイトで「Lucida Sans Unicode」フォントを使用している場合、それが問題です！他のブラウザのパスワードフィールドの大きなドットを正しくエミュレートする唯一のフォントはVerdanaで、わずかな文字間隔が混在しています。したがって、OperaとWebkitの両方で、次のコードを使用して修正します。

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

見つけることができる最善の方法は、input[type="password"] {font:small-caption;font-size:16px}

デモ：http://jsfiddle.net/x5CCf/

28
Sotiris

問題は、（2016年の時点で）パスワードフィールドに、FirefoxとInternet ExplorerがUnicodeコードポイント25CFが、Chromeは文字 "Bullet"（•）を使用し、Unicodeコードポイント2022。

ご覧のとおり、StackOverflowフォントでも、2つの文字のサイズは異なります。

使用しているフォント「Lucida Sans Unicode」は、これら2つの文字のサイズの差がさらに大きいため、その違いに気づきます。

簡単な解決策は、両方の文字が同じサイズのフォントを使用することです。

したがって、ブラウザのデフォルトフォントを使用して、パスワードフィールドの文字を適切にレンダリングする必要があります。

input[type="password"] {
    font-family: caption;
}
6
Timo Türschmann

Input [password]に同様のドットを作成する必要がある場合、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;
  }

その後、同じ入力[パスワード]が表示されました

4
Alexander

Webkit専用のCSS（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 */
3
Volomike