今回の記事はフォーム実装時によく使う、チェックボックス・ラジオボタン・セレクトボックスについての内容になります。
コーディングに携わる人間にとっては常識ですが、ブラウザによって表示されるチェックボックスやラジオボタンのデザインは異なります。
そこで、「絶対に希望するデザイン通りに表示をさせたい」といった要望がある場合は調整を行う必要があります。
CSSによるフォーム系装飾のサンプル
まずは、デモページをご覧ください。
デモページにあるボタンは各最新ブラウザやスマートフォンで崩れがないように表示されているかと思います。
1.ラジオボタンの装飾
デモページではボタン風に装飾しています。
inputタグをopacity: 0;display: none;で非表示にしてデフォルトで表示される円丸を消しています。
そして、labelにbackgroundで円丸の画像を設置しています。
また、ラジオボタン選択時の表示はinput[type="radio"]:checked+labelのように属性セレクタを使用して指定しているのがポイントです。
2.チェックボックスの装飾
こちらもラジオボタンの装飾と仕組みはほぼ同じです。
inputをCSSで非表示にして、labelにbackgroundでチェックボックスのボックス画像を設置しています。
異なるのはinput[type="checkbox"]:checked+label属性セレクタの指定がcheckboxになっている点でしょうか。
3.セレクトボックスの装飾
セレクトボックスは矢印の部分がブラウザにによって異なるデザインで表示されます。
これをappearance: none;でデフォルトにしています。
selectを下記のようにlabelで囲んでいるのがポイントとなります。
<label>
<select>
<option value="00">選んでください</option>
<option value="01">会社員</option>
</select>
</label>labelの:afterにtransparentを混ぜたborder-colorで三角形の矢印を作成しています。
セレクトボックスのオリジナルデザイン化の注意点としてIE10以上の対策用に下記の記述が必須となります。
select::-ms-expand {
display: none;
}
スポンサーリンク