最近、簡易なHTMLを書く機会が多かったので、ウン年前に書いたリセットCSSの見直しをしました。
で、かねがねフォーム系のCSSのブラウザ差異に悩まされていたので、ブラウザ差異ができるだけ生じないフォーム用のリセットCSSも書くことにしました。
見た目をがらりと変えてしまうお洒落なCSSはネットを探せばいくらでも出回っていますが、そういうのじゃなくて、デフォルトっぽい感じの絵面で、最低限の初期設定を行い、かつブラウザ差異をなくすことが目標です。
input, textarea, button, input::file-selector-button{
font-family:var(--gothic-font);
color:var(--main-color);
}まずは基本中の基本。
なぜかinput等にはbodyに指定したフォントが当たらないので、明示的に本文と同じフォントを当てる。フォントはrootで指定しておくこと。
label{
display:inline-block;
cursor:pointer;
}ラベルはinline-blockにする。
textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]){
padding:2px 10px;
border:1px solid #aaa;
}テキスト入力系inputの外見を統一。
textarea{
resize:vertical;
}テキストエリアの変形は縦方向のみ許可。横変形を許可すると往々にしてレイアウトが崩れます。
button, input::file-selector-button, input[type="submit"], input[type="button"], input[type="reset"]{
padding:2px 10px;
background:#eee;
border:1px solid #aaa;
border-radius:2px;
cursor:pointer;
}
button:active, input::file-selector-button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active{
background:#ddd;
}ボタン系の外見を統一。同時にactive時のスタイルを必ず指定する。
label>input[type=checkbox]{
appearance:none;
border:1px solid #aaa;
width:14px;
height:14px;
border-radius:2px;
box-shadow:none;
accent-color:#ddd;
display:inline-block;
vertical-align:-2px;
margin-right:2px;
position:relative;
}
label>input[type=checkbox]:checked{
background-color:#eee;
}
label>input[type=checkbox]:checked::after{
display:block;
content:'';
width:3px;
height:10px;
border-right:1px solid var(--main-color);
border-bottom:1px solid var(--main-color);
transform:rotate(45deg);
position:absolute;
bottom:1px;
left:4px;
}チェックボックスを描写し直す。
appearance:noneでブラウザ指定の描写を削除し、それっぽいものを書き直します。選択時のチェックマークは疑似要素で描写。
label>input[type=radio]{
appearance:none;
border:1px solid #aaa;
width:14px;
height:14px;
border-radius:14px;
box-shadow:none;
accent-color:#ddd;
display:inline-block;
vertical-align:-2px;
margin-right:2px;
position:relative;
}
label>input[type=radio]:checked{
background-color:#eee;
}
label>input[type=radio]:checked::after{
display:block;
content:'';
width:4px;
height:4px;
background-color:var(--main-color);
border-radius:4px;
position:absolute;
bottom:4px;
left:4px;
}同様にラジオボタンも再描写。