前回、「【CSS】テキストエリアの謎の下余白はdisplay:blockで消せる」という記事を書いたのですが、それ以外にもフォームパーツはCSSに若干癖がありますよね。
原因がわかっていても、記述がうる覚えだったりして、コーディングの度に検索するのが作業効率的によろしくないと感じ、フォームのコーディングをする際、ハマりやすそうな内容を備忘録的にまとめてみました。
目次
フォントファミリー・フォントサイズを継承しない
直接、inputタグやtextareaなどにfont-sizeやfont-familyを指定する事で変更する事は可能ですが
input , select , textarea , button{
font-size: 20px;
font-family: selif;
}以下の記述方法でbodyなどに一括で指定したスタイルを継承する事が可能となります。
input , select , textarea , button{
font-size: 100%;
font-family: inherit;
}
width:100%で親要素からはみ出る
フォームパーツにwidth:100%;を指定すると親要素からはみ出る事があります。
その場合は、box-sizing:border-box;を指定してやると解消されます。
input , select , textarea , button{
box-sizing: border-box;
}
テキストエリアの謎の下余白を消す
別記事でも紹介した、divやtable要素で囲まれたtextareaに出来る謎の下余白を消す方法。
textarea{
display: block;
}【合わせて読みたい】
【CSS】テキストエリアの謎の下余白はdisplay:blockで消せる
デフォルトスタイルをリセット
各ブラウザ特有のスタイル、セレクトボックスの矢印などを消します。
input , select , textarea , button{
-webkit-appearance: none;
/*iPhone:safariの角丸も消す*/
border-radius: 0;
}IEでセレクトボックスの矢印を消す
上記の-webkit-appearance: none;だけでは、IEの場合、セレクトボックスの矢印が消えません。
IEでセレクトボックスの矢印を消すには、個別で下記の記述が必要となります。
select::-ms-expand {
display: none;
}テキストエリアのリサイズを制限
リサイズ機能のあるブラウザで見た場合、デフォルトのままだと、縦にも横にもテキストエリアを伸ばす事ができます。
このテキストエリアのリサイズ機能をCSSで制限します。
個人的には、resize:vertical;で縦だけのリサイズを許可する事で、横に伸ばされてレイアウトが破綻する事を防ぐ方法をよく使います。
【リサイズさせない】
textarea {
resize: none;
}【横だけリサイズさせる】
textarea {
resize: horizontal;
}【縦だけリサイズさせる】
textarea {
resize: vertical;
}あとがき
フォームパーツのCSSで、少しハマりそうなものをピックアップしてご紹介しました。
個人的によく検索するものばかりなので、使用頻度はそれなりに高いのではと思います。
新規サイトの制作の際など、プロパティによっては
* {
box-sizing: border-box;
font-size: 100%;
font-family: inherit;
}と最初に一括で指定しておくと、制作が少し楽になるかと思います。
また、制作時に発見があれば都度、追加・更新していきたいと思います。
