2005.02.04

パスワード入力欄 IE6の場合

フォームオブジェクトのパスワード入力欄ですが、以下の環境で表示させると、何故か通常のテキストボックスよりも大きめに表示されます。
環境:Windows XP + Internet Explorer 6

通常のテキストボックス→ パスワード→

恐らくIEの仕様だと思うのですが、この見た目の不揃いをCSSでコントロールする方法を紹介します。

1. width、heightを同じにする。

.wh { width: 130px; height: 23px; }

<input type="text" class="wh" size="10" maxlength="10">

<input type="password" class="wh" size="10" maxlength="10">

サイズは揃いましたでしょうか。
今回、上記の環境では結果は…変わりませんでした。同じように結果が変わらない場合は、次の方法を試します。

2. paddingを0にする。

.pad { padding: 0; }

<input type="text" class="pad" size="10" maxlength="10">

<input type="password" class="pad" size="10" maxlength="10">

いかがでしょうか。
上記の環境ではこの方法で、サイズを統一することができました。

photo
admin