1行のテキスト入力フォームには「何でも入力できるフォーム」と「パスワードを入力させるためのフォーム」があります。前者は、input要素のtype属性に値「text」を指定すれば作れ、後者は、type属性に値「password」を指定すると作れます。どちらも、ウェブ上で各種入力欄を作る際には頻繁に使われているでしょう。

多くの環境では、このテキスト入力フォームもパスワード入力フォームも同じ見た目で表示されます。しかし、WindowsXP以降の環境でIE6以降の場合は、パスワード入力フォームだけが大きめに表示されてしまうことがあります。Windows10のEdgeでは同じに見えるよう戻りましたが、IE11を使った場合は若干大きく描画されます。

入力欄のサイズが一致していないと、なんだかちぐはぐに見えてしまって望ましくありません。入力欄が揃って見えなくなるのを防ぐために、入力欄のサイズはスタイルシートで強制的に幅や高さを指定しておくと良いでしょう。そうすれば、どの入力欄も同じサイズに揃えることができます。例えば、以下のような感じでCSSソースを書きます。

input.userform {
   height: 1.2em;
   width: 10em;
}

上記では、class名として「userform」を付加した入力欄(input要素)に対して、高さを「1.2文字分」・横幅を「10文字分」にしています。高さを「1em(＝1文字分)」ちょうどにしてしまうと、入力フォームの枠線や内側の余白などを含めた大きさが1文字分になってしまうので、文字の端が少し切れてしまうことがあります。ですから、ここでは「1.2em」として、少し広めに確保しています。

HTMLソースは以下のように書きます。上記のスタイルシートで指定したサイズに調整して表示したい入力フォームに「userform」というclass名を付加します。

<input type="text" name="a" class="userform" />
<input type="password" name="b" class="userform" />

上記のHTMLソースとCSSソースを合わせて表示させると、以下のように見えます。

ちなみに、スタイルシートを適用しなかった場合は、以下のように見えます。上記と変わらないように見える環境も多いと思います。IEを使ってこのページを表示していれば、違いが分かると思います。

※FirefoxやChrome・Operaなど、IE以外のブラウザでは元々両者は同じサイズに見えます。また、IEの後継であるEdgeでも同じサイズに見えます。さらに、IEであってもWindowsXP以前のバージョンだったり、クラシックスタイルで表示される環境であれば同じサイズに見えるわけですが。

何もスタイルを指定しない状態では、入力フォームが実際に表示される大きさはブラウザによって微妙に異なります。入力フォームを表示するときには、常にスタイルシートで大きさを指定するようにしておく方が良さそうな気がします。

(更新日：2016年01月27日)