【コピペで学ぶ実例集】HTMLとCSSを使ったラジオボタンのデザイン

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

今回は、ラジオボタンのデザインをを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;
}
https://eclair.company/media/wp-content/uploads/sites/2/2020/03/YutoSeta.jpg
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;
}
https://eclair.company/media/wp-content/uploads/sites/2/2020/03/YutoSeta.jpg
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にします。こうすることでタブによる移動や矢印キーによる選択ができるようになります。今回、紹介しているラジオボタンはすべて対応しています。

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

https://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

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

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

コメントを残す

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