《2007/5/9 水曜日 12:39:48 公開》
テキスト入力フォームの高さを揃える [フォーム, 幅]
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は以下の通りです。
※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。
コメントはまだありません。