パスワード入力欄のマスク文字サイズを調整する

2008年6月28日(土) 14時30分 by level
B ?
Password: ノーマル Password: 対応済み

もじら組フォーラムで紹介されていた、パスワード入力欄のマスク文字が目立ちすぎるのをスタイルシートで修正する Tips を早速導入したのですが、これだけだとマスターパスワードに対応できないので、対応させてみました。追記:Basic 認証のダイアログもこれで OK です。

マスターパスワードのマスク文字のフォントを設定:userChrome.css

#password1Textbox{
 font-family: Verdana, sans-serif;
}

ウェブページのパスワードのマスク文字のフォントを設定:userContents.css

input[type="password"]{
 font-family: Verdana, sans-serif;
}
Master Password: 対応済み

Stylish を使っている人は、まとめて以下のようにすれば OK です。この場合、名前空間を指定してはいけません。

input[type="password"],
#password1Textbox{
 font-family: Verdana, sans-serif;
}

!important を指定していないので、フォントを明示的に指定しているページ(Google や mixi など)では無効になります。

コメント (7)

1 7/01 22:30 あ
(c1) [2008/07/01 22:30:12] by

> font-family: Verdana, sans-serif;

Tahoma ではなく Verdana にしているのはなぜでしょう?

2 7/01 23:24 level
(c2) [2008/07/01 23:24:14] by level

Tahoma よりも Verdana のほうが汎用性があるというような記述をどこかで読んだ記憶があるからです。ただし随分昔の話なので根拠も定かではないのですが。
えむもじらもfont-family: Verdana, sans-serif;です。

3 7/02 12:35 cube
(c3) [2008/07/02 12:35:44] by cube

Stylish用の試しました。確かにフォントは小さくなるんですが、
コメントフォームが横に伸びますよね

伸びても問題ないデザインのサイトだと問題ないのですが、
表示が崩れるサイトがあるので解決法あるとありがたいのですが。

4 7/02 12:59 level
(c4) [2008/07/02 12:59:48] by level

TahomaにするとVerdanaよりは狭くなります。
あとは手持ちのフォントを試してみてください。

5 7/02 16:31 Cube
(c5) [2008/07/02 16:31:33] by Cube

なるほど。フォント指定で変わるのですね。
ありがとうございます、試してみますね。

6 7/03 00:47 あ
(c6) [2008/07/03 00:47:53] by

> Tahoma よりも Verdana のほうが汎用性があるというような記述をどこかで読んだ記憶があるからです。

Web ページのように、いろんな環境の人が見るのであればそうですね。
しかしユーザースタイルシートのように、そのユーザーの環境でしか使われないもので、かつ Windows 上の Firefox 3 で、ということであれば Windows 2000 以降しかあり得ないので、Tahoma の方が良いと思います。
その場合は、Verdana よりも Tahoma の方が標準的なので。
http://en.wikipedia.org/wiki/Tahoma_(typeface)
> It is also the default screen font used by Windows 2000, Windows XP, and Windows Server 2003
それで、パスワード欄の幅が、IE6 のデフォルトでの状態とほぼ同じになるはずです。

じゃあ「Windows 上の Firefox 3」以外の Firefox だったらどうするんだ、というと、その場合はマスク文字が * だったり • だったりするので、そもそもそのようなユーザースタイルシートはおそらく不要でしょう。

7 9/17 14:56 うぐいす
(c7) [2008/09/17 14:56:44] by うぐいす

Firefox3になってから、長いパスワードが入力できなくなってしまい、
方法を探っていたらこちらに来ました。何かを調整することはおかげさまで
分りましたが、具体的にどうどこをどのように操作するのか、
素人の私には全く分りません。
差し支えなければ、具体的に伝授して頂けませんでしょうか?
よろしくお願いいたします。

トラックバック (2)

トラックバックは検索対象外です。