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

2018年2月17日CSSデザイン, CSS

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

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

css

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

同様に、インプットテキスト・送信ボタンにも適用できます

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

2018年2月17日CSSデザイン, CSS

Posted by Yousuke.U