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