Written by Kasumi

【簡単】radioボタン(ラジオボタン)のデザインをカスタマイズする方法【CSS】

ブラウザによってradioボタンの見た目が変わる。

共通のデザインになるようカスタマイズしたい。

この様な悩みを解決します。

本記事ではCSSを使って、独自デザインのradioボタンを作成する方法について解説します。

radioボタンをリセットする

input[type="checkbox"] {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

まず最初にradioボタンのデフォルトデザインを無効にします。

上記CSSを当てることで、リセットされます。

radioボタン用HTMLを用意

<input id="radio01" name="radio" class="form-input-radio" type="radio">
<label for="radio01">ラジオ01</label>

<input id="radio02" name="radio" class="form-input-radio" type="radio">
<label for="radio02">ラジオ02</label>

<input id="radio03" name="radio" class="form-input-radio" type="radio">
<label for="radio03">ラジオ03</label>

radioボタン用のHTMLです。

本記事では上記コードを使ってCSSでデザインしていきます。

radioボタンデザイン サンプル

See the Pen
ラジオボタン デザイン
by Kohei (@kouk05)
on CodePen.0

radioボタンデザインサンプルです。

一般的なradioボタンの仕様をリセットされた状態から独自のCSSで作ってます。

導入方法は以下の通りです。

radioボタン用独自デザインCSS

  input[type="radio"] {
    width: 20px;/*radioボタンの横幅*/
    height: 20px;/*radioボタンの縦幅*/
    border-radius: 100px;
    position: relative;
    vertical-align: sub;
    margin-right: 5px;
  }
  input[type="radio"]::before, input[type="radio"]::after{
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
  }
  input[type="radio"]::before {
    background-color: #fff;
    border: 1px solid #c2c1c1;
    height: 20px;/*radioボタンの横幅*/
    width: 20px;/*radioボタンの縦幅*/
    left: 0px;
  }
  input[type="radio"]::after {
    background-color: #c2c1c1;
    opacity: 0;/*チェックされてないradioボタンは非表示*/
    height: 14px;/*radioボタンチェック時の中点の高さ*/
    width: 14px;/*radioボタンチェック時の中点の横幅*/
    left: 4px;/*radioボタンチェック時の中点の位置*/
  }
  input[type="radio"]:checked::after {
    opacity: 1;/*チェックされたradioボタンは表示*/
  }

先ほどのradioボタンサンプルで使ってるCSSになります。

radioボタンを作るのに擬似要素のbefore要素・after要素を採用してます。

擬似要素のbefore要素でradioボタンの外枠、after要素でradioボタンがチェックされたときの中点を作成します。

それぞれwidth・height・positionを任意の値に設定し、radioボタンの位置・形状を調整します。

opacityを使ってチェック前・チェック後に透過率を設定し、radioボタンがチェックされたときの表示・非表示を設定します。

以上で独自デザインで簡単なradioボタンの完成です。

まとめ

お問い合わせフォームなどでradioボタンを扱うサイトが多々あるかと思います。

本記事を参考に独自のデザインを当ててみましょう。

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
830
HTMLCSS プログラミング

【簡単】スマホのぱんくずを一行にして、はみ出した分を横スクロールで見せる方法

2022.01.17
108
HTMLCSS

【CSS】ボーダー斜めのストライプ背景を作成する方法

2022.10.02
97
HTMLCSS

position: sticky;で要素が追従しない時の原因・対処方法

2022.10.06
204