CSS form画面ではみ出しがある時はbox-sizingを指定すると便利

0 google+0 はてなブックマーク0
2016年5月3日10:59 AM|WebSite制作

form画面のinput type="text”などで、指定した範囲から幅がはみ出たりした時の対処法。

空白を指定する「padding」、枠線を指定する「border」のCSS。
これらはよく使うのだけど。
テキストフォーム等でこの指定をすると、場合により、はみ出てしまう。

例えばこんな感じ。



HTML

<form action="">
<input type="text" placeholder="検索" value="" />
<input type="submit" value="Search" />
</form>

CSS

form {
width:200px;
}
form input[type="text”] {
width:100%;
border: 2px solid #aaa;
padding:4px 10px;
margin:0;
}
form input[type="submit”] {
width:100%;
margin:0;
}

テキストフォームのみはみ出ている。
これは、borderの枠2px、paddingの左10pxと右10pxの部分がはみ出しているから。

こんな時は

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

をCSSに追加するとよい。
CSS3から使えるようになったスタイルで、「padding」と「border」を含んだ幅(width)と高さ(height)になる。



CSS

form {
width:200px;
}
form input[type="text”] {
width:100%;
border: 2px solid #aaa;
padding:4px 10px;
margin:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form input[type="submit”] {
width:100%;
margin:0;
}

今まで、divなどのレイアウトでは、paddingやborderを計算してボックスを作っていたけど、これを使うとかなり便利。
面倒な計算しなくてもいいんですよ。

IE7以前ではサポートされないので、古い環境を想定したサイトでは使えないけど。
もうそろそろ、IE7も無くなるだろう…というか、なくなって欲しいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です