【CSS】ラジオボタンやチェックボックスのデザインを良くする

ラジオボタンやチェックボックスはデフォルトの状態だと少し硬い印象を受けます。

デフォルトのラジオボタン、チェックボックス

ちょっとお堅い感じですよね。
デザイン性を高めることは多いので、このラジオボタン、チェックボックスを次のように変更しましょう。

変更の手順さえ分かれば、ラジオボタンもチェックボックスも変更可能です。
もちろん、CSSのみで実装可能です。

【CSS】ラジオボタンやチェックボックスのデザインを良くする

デザインを変更する場合、HTMLの要素である「<input type=”radio”>」に対してCSSを適用すればよい、と思われがちですが、その方法ではデザインの変更ができません。

変更するにはCSSのbefore、after要素を使用します。まずはHTMLを以下のように書き換えましょう。

ラジオボタンの横の文言をlabel要素で囲みました。
この要素とbeforeとafterに以下のようなCSSを適用します。

ちょっと長めですが、label要素はbefore,afterと横並びにするためにflexを設定しています。
この状態で、表示は以下のようになります。

before要素はチェックされる前の、after要素はチェックされた後を表しています。
このままでは横並びなので、after要素を移動させて、before要素と重ねましょう。
CSSに以下の文言を追加します。

これで横方向の位置を調節します。
表示は以下のようになります。

これでチェック時の表示ができました。
あとは表示を切り替えるだけです。
以下のようになれば完成ですね。

• チェック時：after要素を表示する
• 非チェック時：after要素を表示しない

この切り替えはCSSでできます。
after要素のCSSを次のように変更してください。

input要素がチェックされたときにafter要素が適用されるようにCSSの隣接セレクタを使用します。
ただしこのままではlabelをクリックしてもinput要素はチェックされません。
機能させるには、inputとlabelを紐づける必要があります。
そのためには、HTMLを次のようにします。

HTMLにはinput要素とlabelを紐づける仕組みがあります。
そのためには

• inputにidを追加
• labelにforを追加
• ＝””の中身は同じなら何でもOK

が必要です。

これでクリック時にチェックされるラジオボタンが完成しました。
あとは元々あるinput要素を非表示にすれば完成です。

ラジオボタンやチェックボックスをデザインする際の参考にして下さい。