inputやtextarea要素のpadding分、要素全体の幅が伸びる問題の対処
カテゴリ：Webサイト
記事の種類：デザイン変更
inputやtextareaの入力フォーム、selectメニューをちょっとエレガント？なデザインに変更しました。
これまでは装飾はなくデフォルト状態で表示していましたが、色の変更やpaddingなどを調整してかなり見やすくなったと思います。もっと早くやっておけばよかったです。
ちなみに、inputやtextareaのpaddingを増やすとその分だけ幅が増えてしまう（要素全体の幅がwidth+paddingになる）問題が起こりました。調べるとこれは仕様のようで、widthを100%にしていても、paddingの分増えるため、幅が100%以上になってしまい、親領域から入力フォームがはみ出して不格好になってしまいます。
解決策として、box-sizing: border-box;というCSSがあり、これを指定すると要素全体がwidthやheightで指定した幅になるように調整してくれます。非常に大変助かりました。
box-sizingのデフォルト値はcontent-boxでbox-sizing: border-box;を指定していない場合、要素のコンテンツ領域がwidthの幅となります。したがってpaddingやborder分、textareaがはみ出ているのがわかります。
毎回、ちょっといじると何かのトラブルに遭遇する、Web開発の世界は奥が深いですね。
公開日時：2024年08月25日 14:42:08
最終更新日時：2024年08月25日 15:20:10
