HTML/CSS

【サンプルあり】CSSでシンプルおしゃれなラジオボタンをデザインする

  /

デフォルトのラジオボタンのスタイルはブラウザによって差異があり、スタイルを統一させるにはCSSでカスタマイズする必要があります。

今回はその方法をご紹介します。

前回チェックボックスのスタイリング方法を紹介したのですが、ほぼ同じ方法です！

【サンプルあり】CSSでシンプルおしゃれなチェックボックスをデザインするデフォルトのチェックボックスのスタイルはブラウザによって差異があり、スタイルを統一させるにはCSSでカスタマイズする必要があります。今回はシンプルでおしゃれなチェックボックスをCSSでデザインする方法を紹介します。...
Contents
  1. サンプル【コピペOK】
  2. 解説
  3. おわりに

サンプル【コピペOK】

See the Pen CSS Radio Button by POSIPAN (@posipan) on CodePen.

解説

HTML

ラジオボタン1つ分のHTMLです。
ラジオボタンとラベルは下記のように隣接させてください。

ラジオボタンはチェックボックスと違い、グループ内で複数選択ができないので、グループ内ラジオボタンのname属性の値は統一してください。

<div class="radio_item">
    <input type="radio" name="radio" class="radio" id="radio01" checked>
    <label for="radio01">Item1</label>
  </div>

inputタグのid属性、labelタグのfor属性には同じ値を設定します。

これによりラベルとラジオボタンがリンクされ、ラベルをクリックした際にラジオボタンも反応するようになります。

SCSS

以下はラジオボタンに関連する全体のCSSになります。SCSSで記述しています。

.radio {
  display: none; // ラジオボタンを非表示
  
  &:checked {
    + label {
      &:after {
        opacity: 1;
      }
    }
  }
}

label {
  position: relative;
  padding-left: 45px;
  font-family: 'Lato', sans-serif;
  font-size: 28px;
  cursor: pointer;
  color: #121212;
  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
  }
  // ラジオボタンの枠
  &:before {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #30475E;
  }
  // チェックサイン
  &:after {
    top: 6px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #30475E;
    opacity: 0;
  }
}

ラジオボタンはdisplay: none;で非表示にします。

.radio {
  display: none; // ラジオボタンを非表示
  
  &:checked {
    + label {
      &:after {
        opacity: 1;
      }
    }
  }
}

label要素に対して疑似要素を割り当てます。疑似要素beforeでラジオボタンの枠、同じく疑似要素のafterでチェックサインを作成します。

チェックサインはopacity: 0;で非表示にします。

label {
  position: relative;
  padding-left: 45px;
  font-family: 'Lato', sans-serif;
  font-size: 28px;
  cursor: pointer;
  color: #121212;
  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
  }
  // ラジオボタンの枠
  &:before {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #30475E;
  }
  // チェックサイン
  &:after {
    top: 6px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #30475E;
    opacity: 0;
  }
}

以下はラジオボタンを非表示にする説明で記載したコードと同じです。

label要素で擬似的に作成したラジオボタンにチェックが入ると、display: none;で非表示にした本来のラジオボタン（input要素）にもチェックが入るようになります。

.radio {
  display: none; // ラジオボタンを非表示
  
  &:checked {
    + label {
      &:after {
        opacity: 1;
      }
    }
  }
}

おわりに

ちなみにラジオボタンは、画像のようなラジオのプッシュボタンと同じように動作することからラジオボタンと呼ばれているそうです。

他のボタンを押すと、ONになっていたボタンはOFFになるんですね。

ではまた✋

関連記事