Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 276
content=""/> Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 276
content="" /> Warning: Undefined variable $description in /home/tkportfolio/kata-tip.com/public_html/wp-content/themes/kata-tip/functions.php on line 276
content="" />

Web制作 × AI

CSSによるform系タグの実装方法

今回の記事はフォーム実装時によく使う、チェックボックス・ラジオボタン・セレクトボックスについての内容になります。
コーディングに携わる人間にとっては常識ですが、ブラウザによって表示されるチェックボックスやラジオボタンのデザインは異なります。
そこで、「絶対に希望するデザイン通りに表示をさせたい」といった要望がある場合は調整を行う必要があります。

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;
}

この記事を書いた人(著者情報)

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク