CSSでRadioButtonやCheckBoxをカスタマイズ

どうも、もりもりです。

今回はググればすぐ出てくる内容ですが、自分用にメモ。

目次
■ RadioButtonのカスタマイズ
■ CheckBoxのカスタマイズ
■ ポイント
■ さいごに

■ RadioButtonのカスタマイズ

input(RadioButton)のidとlabelのforを一致させます。 あとはそれらを囲ってるdivに適用するclassを作るだけ。 とりあえずボタン風にしました。

See the Pen CustomRadioButton by Y Mori (@ymdevx3) on CodePen.

■ CheckBoxのカスタマイズ

こちらもRadioButton同様、input(CheckBox)のidとlabelのforを一致させます。 あとはそれらを囲ってるdivに適用するclassを作るだけ。 こちらもとりあえずボタン風にしました。 disabledにするにはinput(CheckBox)をdisabledにするだけ。

disabledを指定するとなるとスタイルに.(checkBoxのclass):enabledと.(checkBoxのclass):disabledが必要。 さらにチェックがON/OFFでもスタイルを分けるなら.(checkBoxのclass):enabled:checkedと.(checkBoxのclass):enabled:not(checked)と分ける。 で、それぞれに表示用classの:hoverと:activeを用意する。

See the Pen CustomCheckBox by Y Mori (@ymdevx3) on CodePen.

■ ポイント

1. もうすでに書いてますが、inputのradioやcheckboxのidと 実際に表示するlabelのforを合わせる。
2. inputタグをdisplay: none;で隠す。
3. 表示するスタイルを作成して適用する。

■ さいごに

実際にやってしまえば大した話ではありませんでしたが、まぁ自分用に残しておきます。 inputタグは非表示にしてしまうので、表示する側のスタイルは好きなようにできますね。 CheckBoxなんかは今風にToggleとかが良いんですかね。また時間のある時にでも良い感じのToggleのCSSがないか探してみます。

以上、もりもりでした。