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

テキスト入力フォームの横幅を指定する [フォーム, ]

入力フォームをHTMLで作成する際、横幅を何文字分にするかを属性で指定できます。でも、その指定によって実際に何ピクセルの横幅が確保されるかは、ブラウザによって異なります。ですから、あまり細かなデザイン調整ができません。
フォームのサイズは、スタイルシートで指定してしまうのが良いでしょう。

HTMLで横幅を指定していても、スタイルシートで指定した横幅指定の方が優先されるので、スタイルシートを解釈できないブラウザ(もはやそんなものはないに等しいですが)のためにHTMLの属性で横幅を指定しておきつつ、スタイルシートで望みの横幅を指定することができます。

フォームに限らず、横幅を指定するにはwidthプロパティを使います。
例えば、以下のようなHTMLソースがあるとき…

<form action="xxx">
<input type="text" size="12" class="hoge">
</form>

hogeクラスのinput要素の横幅を指定するには

input.hoge { width: 10em; }

と書くだけです。この場合、10文字分の横幅が確保されます。
もっときっちり具体的なサイズにしたければ、「120px」とか書けば、120ピクセルの横幅になります。

上記のソースを表示させると以下のように見えます。

上側は10文字分、下側は120pxの横幅になっているはずです。
この場合、ブラウザの文字サイズを変更すると、上側の入力フォームはそれに合わせて横幅が変化します。(「10文字分」だから。) 下側は、ピクセル数で指定しているので変わりません。(文字サイズではなく、ページ全体の倍率を変更できるブラウザだと、下側のフォームでも変わると思いますが。)

なお、input要素すべてを対象にスタイルを指定するのは危険です。
テキスト入力フォームだけでなく、チェックボックスやボタンもinput要素ですから。それらに対しても同じ横幅を指定すると、困ったことになることが多いでしょう。(^_^;)

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

著者紹介

主要なカテゴリ

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

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

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

(必須)

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

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

コメント:

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

トラックバック

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

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