【CSS】テキストエリア等がはみ出ない様にする

2019年6月12日CSS,CSSデザイン

テキストエリアに限らずですがスマホ表示用にフォームアイテムはスマホ端末表示用に横幅100％ぴったしで表示したい時がありますが、そのまま100％としてもだと微妙にハミ出てしまいます

ハミ出していると表示がずれてしまい、特にスマートフォンでの操作においてほんの少しのズレが違和感に繋がってしまいます

原因は枠線なので、「box-sizing:border-box;」で枠線を内側にするか、「border:none;」枠線無しのフォームにして対策する方法があります

テキストエリア等がはみ出ない様にするサンプルコード

HTML

<form action="#" method="post">
<p>NAME</p>
<input type="text" name="name" value="NO NAME" />
<p>TEXT</p>
<textarea name="textarea1" rows="8" cols="40">NO BORDER</textarea>
<input type="submit" name="button1" value="SUBMIT" />
</form>

CSS

textarea {
width:100%;
box-sizing:border-box;border:none;
background: #d6ffff;
padding: 1em;
margin:0;
}

サンプルコードは分かりやすいようにtextareaのみにしていますが、インプットテキストや送信ボタンもテキストエリア等がはみ出ない様にする事が可能です

サンプルページを作成しました

https://samples.repop.jp/form-design/form-width-100percent.html

2019年6月12日CSS,CSSデザイン

Posted by Yousuke.U