"CSS Tips Factory" : Presented by Nishishi via WordPress.

テキスト入力フォームの高さを揃える [フォーム, ]

1行のテキスト入力フォームには、何でも入力できるフォームと、パスワードを入力させるためのフォームがあります。前者は、input要素のtype属性にtextを指定すれば作れ、後者は、type属性にpasswordを指定すると作れます。
多くの環境では、テキスト入力フォームもパスワード入力フォームも同じ見た目で表示されますが、WindowsXP以降・IE6以降の場合、パスワード入力フォームだけ大きめに表示されてしまうことがあります。

そのために入力欄が揃って見えなくなるときは、スタイルシートで強制的に高さを指定すると、同じ高さに揃えることができます。例えば、以下のような感じで。

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

上記では、userformクラスのinput要素に対して、高さを「1.2文字分」・横幅を「10文字分」にする指定です。高さを「1em(=1文字分)」ちょうどにすると、入力フォームの枠線などを含めた大きさが1文字分になってしまうので、文字の端が少し切れてしまうことがあります。ですから、ここでは「1.2em」として、少し広めに確保しています。

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

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

このHTMLを先ほどのスタイルシートを使って表示させると、以下のように見えます。

ちなみに、スタイルシートを適用しなかった場合は、以下のように見えます。

FirefoxやOperaなど、IE以外のブラウザでは元々両者は同じサイズに見えます。また、IEでもWindowsXP・Vista以外のOSだったり、クラシックスタイルの表示だった場合は同じサイズに見えるわけですが。まあ、新しいスタイルでの表示の差が気になる場合には、このスタイルを使うのが良いと思います。

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

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。