Input タグ Text ボックスの size 属性はブラウザにより解釈が異なるので注意

HTML の Input タグで利用できる size 属性は、Input のコントロールに表示する文字数を定義する属性として用意されています。しかし日本語の場合、半角文字と全角文字が混在しているため、同じ 1文字でも文字の横幅が異なります。

単にサイズ違いで済むのであれば、簡単に調整できると思うのですが、残念ながらブラウザにより size 属性の解釈が異なるため、想定していたイメージ通りになりません。

ブラウザ別 size 属性の表示イメージ

具体的に各ブラウザの表示イメージをご覧ください。Chrome、Internet Explorer 11、Fire Fox で表示してみました。

上記の例はテキストボックス (type="text") に、それぞれ size 属性を定義したものです。フォントの指定をしていないので、Windows 上でのブラウザ標準状態での表示イメージとなります。

比べてみても、何を基準にサイズが決められているのかよくわからない と言うのが正直なところです。半角に合っているようにも見えますが、Fire Fox では size="20" の場合にはみだしてしまっています。

【2015.8.9 追記】Edge の場合

Windows 10 からの標準ブラウザ Microsoft Edge で表示した場合、Internet Explorer 11 と同じ表示イメージとなりました。

テキストボックスのサイズは width スタイルを指定しよう

各ブラウザで解釈が異なる属性を利用するのは、あまり好ましくありません。このような場合は、size 属性を利用せずに、スタイルシートでピクセル指定すると良いでしょう。

次のように style 属性を利用して直書きするか、またはクラス指定して別途スタイルシート定義する方法があります。

<input type="text" style="width:200px;" />

これでテキストボックスのサイズは、ブラウザ間で同じように表示することができます。ただ、フォントによって 1文字あたりの横幅は異なるので、サイズを指定する場合は、少し余裕を持たせて定義すると良いでしょう。