テキスト入力フォームの横幅はCSSで指定する

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

そもそもデザインをHTML側で調整するのは望ましくありません。入力フォームのサイズはスタイルシートで指定するのが良いでしょう。

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

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

<input type="text" size="12" class="hoge">

class名が「hoge」であるinput要素の横幅を指定するには、

input.hoge { width: 120px; }

と書くだけです。この場合、120ピクセルの横幅が確保されます。
親要素に対する割合で指定することもできます。例えば以下のように値に「75%」と指定すれば、親要素(＝外側のブロック)の横幅の75%のサイズで表示されます。

input.hoge { width: 75%; }

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

上側は120px、下側は75%の横幅になっているはずです。

上側の例ではピクセル数で指定しているのでブラウザの幅に関係なく入力欄の幅は一定ですが、下側の例ではブラウザのウインドウ幅を変化させると入力欄の幅も変化します。

class属性を使わずに、テキスト入力欄だけを対象にして装飾する方法

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

しかし、だからといって「テキスト入力フォーム」に対してだけ、いちいちclass名を割り振っていくのが面倒だ……という場合は、属性セレクタという仕組みを使って以下のように記述すると便利です。

input[type="text"] { width: 15em; }

上記の場合は、「input要素のうち、type属性の値が『text』であるもの」だけに限定して、横幅を15文字分にする装飾指定になります。

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