テキストボックスの「size属性」の幅はブラウザによって異なるので注意

WordPress個別サポート

inputタグやtextareaタグを使ってフォームを作成するときにsize属性やcols属性を使ってサイズ調整をすると、うまくいかない場合があります。たとえば、次のようなタグでフォームを作成したとします。

<form>
 <table>
  <tr>
   <th>お名前</td>
   <td><input type="text" name="uname" size="20"></td>
  </tr>
  <tr>
   <th>メールアドレス</td>
   <td><input type="text" name="from" size="30"></td>
  </tr>
  <tr>
   <th>タイトル</td>
   <td><input type="text" name="title" size="40"></td>
  </tr>
  <tr>
   <th>メッセージ</td>
   <td><textarea rows="5" cols="40" name="naiyou"></textarea></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" value="内容を確認"></td>
  </tr>
 </table>
</form>

作成したフォームをGoogle Chromeで表示してみると問題ありません。

Google Chromeでは問題なく表示される
Google Chromeでは問題なく表示される

ところが、FireFoxで表示すると次のようにテキストボックスやテキストエリアがサイドバーに重なってしまいます。

FireFoxで見るとフォーム要素がサイドバーに重なってしまう
FireFoxで見るとフォーム要素がサイドバーに重なってしまう

ちなみにInternet Explorerでもうまく表示できません。

Internet Explorerでも表示がおかしい
Internet Explorerでも表示がおかしい

原因はブラウザによって「size="40"」や「cols="40"」の幅が異なることです。

対処は簡単で、inputタグやtextareaタグで幅のサイズ調整はsize属性やcols属性を使わずにCSSで制御することです。

「すでにsize属性やcols属性を使ってデザインを完成してしまいましたが?!」という場合でも大丈夫です。HTMLの属性よりCSSの方が優先度が高くなるので、これから記述してもCSSが優先されるはずです。

size属性やcols属性を使ったHTMLタグは修正しなくても大丈夫です。

以下は、テキストボックスとテキストエリアの幅を画面いっぱい(width: 100%;)に調整する例です。

input[type="text"],
textarea {
    width: 100%;
}

表示結果は次のようになります。FireFoxでも問題なく表示されます。

FireFoxでもフォームが問題なく表示される
FireFoxでもフォームが問題なく表示される

すべてのフォーム要素を同じ幅にしたくない場合は次のようにサイズごとにスタイルを適用することもできます。

input[type="text"][size="20"] {
    width: 170px;
}

input[type="text"][size="30"] {
    width: 250px;
}

input[type="text"][size="40"] {
    width: 300px;
}

サイズごとに別々のサイズに調整されます。

テキストボックスのサイズごとに別々の幅に調整する
テキストボックスのサイズごとに別々の幅に調整する
サイズ(px)は仮の設定です。「size="20"」が「width: 170px;」ということではありません。それぞれ、自由な幅に修正してお使いください。

2015年10月22日WordPressトラブル