【コピペ可】HTMLとCSSでラジオボタンのデザイン４選

HTMLとCSSのラジオボタン事例集。コピペ用のラジオボタンの基本デザインをまとめました。

SHARE

今回は、ラジオボタンのデザインををHTMLとCSSのサンプルと共にご紹介します。汎用的なデザインを集めているのでフォームのコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。フロントエンド初学者でもカスタマイズしてコードを再利用できます。

input要素からラジオボタンをCSSでカスタマイズするのは難易度が少し高いです。
検索してもあまりでてこないアクセシビリティ対応のラジオボタンのカスタマイズ方法ですので、ぜひ活用してください。

基本のラジオボタン

基本のラジオボタン です。シンプルで使いやすいデザインにしています。

<label class="ECM_RadioInput"><input class="ECM_RadioInput-Input" type="radio" name="radio"><span class="ECM_RadioInput-DummyInput"></span><span class="ECM_RadioInput-LabelText">YES</span></label>
<label class="ECM_RadioInput"><input class="ECM_RadioInput-Input" type="radio" name="radio"><span class="ECM_RadioInput-DummyInput"></span><span class="ECM_RadioInput-LabelText">NO</span></label>
.ECM_RadioInput {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ECM_RadioInput:hover {
  background: rgba(0,0,0,0.05);
}
.ECM_RadioInput-Input {
  opacity: 0;
  width: 0;
  margin: 0;
}
.ECM_RadioInput-Input:focus + .ECM_RadioInput-DummyInput {
  border: solid 2px #333333;
  background: #EEEEEE;
}
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput {
  border: solid 2px #333333;
}
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #333333;
}
.ECM_RadioInput-DummyInput {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: solid 2px #888;
}
.ECM_RadioInput-LabelText {
  margin-left: 12px;
  display: block;
  font-size: 18px;
  font-weight: bold;
}
YutoSeta
YutoSeta

borderと中の円マークの色を変更してカスタマイズしてみましょう。

白抜きアイコンのラジオボタン

黒背景に白ポチのチェックボックス です。こちらも使いやすいデザインにしています。

<label class="ECM_RadioInput"><input class="ECM_RadioInput-Input" type="radio" name="radio"><span class="ECM_RadioInput-DummyInput"></span><span class="ECM_RadioInput-LabelText">YES</span></label>
<label class="ECM_RadioInput"><input class="ECM_RadioInput-Input" type="radio" name="radio"><span class="ECM_RadioInput-DummyInput"></span><span class="ECM_RadioInput-LabelText">NO</span></label>
.ECM_RadioInput {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ECM_RadioInput-Input {
  opacity: 0;
  width: 0;
  margin: 0;
}
.ECM_RadioInput:hover > .ECM_RadioInput-DummyInput{
    border: dashed 2px #333333;
}
.ECM_RadioInput-Input:focus + .ECM_RadioInput-DummyInput {
  background: #FFFFFF;
}
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput {
  background: #333333;
}
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
}
.ECM_RadioInput-DummyInput {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #DDDDDD;
  border: dashed 2px transparent;
}
.ECM_RadioInput-LabelText {
  margin-left: 12px;
  display: block;
  font-size: 18px;
  font-weight: bold;
}
YutoSeta
YutoSeta

背景色をカスタマイズしてみましょう。
また、円印の大きさを変えることでも印象が変わるカスタマイズができます。

スタイリッシュなラジオボタン

スタイリッシュなチェックボックス です。細い線と影が特徴です。

<label class="ECM_RadioInput"><input class="ECM_RadioInput-Input" type="radio" name="radio"><span class="ECM_RadioInput-DummyInput"></span><span class="ECM_RadioInput-LabelText">YES</span></label>
<label class="ECM_RadioInput"><input class="ECM_RadioInput-Input" type="radio" name="radio"><span class="ECM_RadioInput-DummyInput"></span><span class="ECM_RadioInput-LabelText">NO</span></label>
.ECM_RadioInput {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ECM_RadioInput-Input {
  opacity: 0;
  width: 0;
  margin: 0;
}
.ECM_RadioInput:hover > .ECM_RadioInput-DummyInput{
    background: #BBBBBB;
}
.ECM_RadioInput-Input:focus + .ECM_RadioInput-DummyInput {
  background: #BBBBBB;
}
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput {
  background: #333333;
}
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
}
.ECM_RadioInput-DummyInput {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EEEEEE;
  box-shadow: 0 1px 4px rgba(0,0,0, .4) inset;
}
.ECM_RadioInput-LabelText {
  margin-left: 12px;
  display: block;
  font-size: 18px;
  font-weight: bold;
}

カラフルなラジオボタン

キュートでカラフルなデザインにおすすめのラジオボタンです。ポップでかわいいデザインに仕上げました。

<label class="ECM_CheckboxInput"><input class="ECM_CheckboxInput-Input" type="checkbox"><span class="ECM_CheckboxInput-DummyInput"></span><span class="ECM_CheckboxInput-LabelText">利用規約に同意する</span></label>
.ECM_RadioInput {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ECM_RadioInput-Input {
  opacity: 0;
  width: 0;
  margin: 0;
}
.ECM_RadioInput:hover > .ECM_RadioInput-DummyInput{
    transform: scale(1.2);
}
.ECM_RadioInput-Input:focus + .ECM_RadioInput-DummyInput {
  background: #FFFFFF;
}
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput {
  background: rgba(107, 26, 250, 1);
}
.ECM_RadioInput-Input:checked + .ECM_RadioInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
}
.ECM_RadioInput-DummyInput {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.15);
  transition: all .15s linear;
}
.ECM_RadioInput-LabelText {
  margin-left: 12px;
  display: block;
  font-size: 18px;
  font-weight: bold;
}

HTMLとCSSの解説

HTML構造は同じ。CSSのバリエーションだけで表現しています。

今回のラジオボタンのHTMLは全て同じものを使っています。CSSの書き方次第で様々なデザインが表現できます。

アクセシビリティにも配慮したラジオボタン

多くのサイトで紹介されているラジオボタンはdisplay: none;を使ったカスタマイズであるため、キーボードを使った選択操作ができません。アクセシビリティに対応していないということです。また、hoverやfocusなどinputを選択している時のスタイルも指定されていないため、ユーザーにとってわかりにくいものとなってしまいます。

解決方法はシンプルです。input要素をdisplay: none;にするのではなく、widthを0にします。こうすることでタブによる移動や矢印キーによる選択ができるようになります。今回、紹介しているラジオボタンはすべて対応しています。

チェックボックスのコピペ実装記事はこちら

HTMLとCSSのチェックボックス実例集。コピペ用のチェックボックス デザインをまとめました。【コピペ可】HTMLとCSSのチェックボックスのデザイン４選

この記事をかいてみての感想

Yuto Seta
Yuto Seta

チェックボックス に引き続きラジオボタンのCSSカスタマイズ方法の紹介でした。他の記事を読んでいてもHTML構造が複雑であったり、カスタマイズがしづらかったりして使いづらかったので、記事にしてみました。

コメント、質問お待ちしております！

2 COMMENTS

nkn

わかりやすい記事ありがとうございます。
１点質問なのですが、こちらのデザインを使用した場合ですが、最初から「YES」または「NO」をチェックした状態にすることは可能でしょうか？

返信する
YutoSeta

inputタグにchecked属性をつけてあげると、
通常のラジオボタンと同様に最初からチェックをつけた状態にできます。
disabled属性やreadonly属性も同様に使えます。

返信する

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

HTMLとCSSのチェックボックス実例集。コピペ用のチェックボックス デザインをまとめました。
【コピペ可】HTMLとCSSのチェックボックスのデザイン４選

次の記事

プログラミング学習で挫折しそうな初学者へアクションプランを送り…
プログラミングで挫折しないために アクションプランを送ります