CSS Web制作

【CSS】ラジオボタンのデザインをカスタマイズする方法【簡単に色だけ変える方法あり】

※ 当サイトではアフィリエイト広告を利用しています

ラジオボタンのデザインって変えられる?

ラジオボタンのデザインですが、コーディング案件でしっかりデザインされていたら、デフォルトのデザインのままではダメな場合があります。

今回は、ラジオボタンを自由にカスタマイズする方法と、色だけ変える簡単な方法をご紹介します。

WordPressのプラグイン、Contact Form7のラジオボタンを変える方法は、以下の記事を参照下さい。

あわせて読みたい
【WordPress】Contact Form7でラジオボタンのデザインをカスタマイズする方法
【Contact Form 7】ラジオボタンのデザインをカスタマイズする方法

続きを見る

同様に、Contact Form7のラジオボタンを画像に変える方法は、以下の記事を参照下さい。

あわせて読みたい
【WordPress】Contact Form 7でラジオボタンを画像にカスタマイズする方法
【Contact Form 7】ラジオボタンを画像にカスタマイズする方法

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

ラジオボタンのデザインをカスタマイズする方法

まずはデフォルトのラジオボタンを見てみます。

コードはこちら。

<label><input type="radio" name="dog" />チワワ</label>
<label><input type="radio" name="dog" />トイプードル</label>
<label><input type="radio" name="dog" />ミニチュアダックス</label>

CSSはフォントサイズや余白以外は何も書いていないので、割愛します。

デモはこちら。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

ちなみに、デフォルトでどれかにチェックを入れた状態にするには、inputタグにchecked="checked"を入れればOKです。

<label><input type="radio" name="dog" checked="checked" />トイプードル</label>

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

このラジオボタンのデザインをカスタマイズします。

HTMLは同じですが、今回は横並びにするためにdivタグで囲っています。

<div class="container">
  <label><input type="radio" name="dog" />チワワ</label>
  <label><input type="radio" name="dog" />トイプードル</label>
  <label><input type="radio" name="dog" />ミニチュアダックス</label>
</div>

CSSはこちら。

/* ラベルのスタイル */
label {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin-right: 20px; /* ラベル間の間隔 */
}
/* チェックされたラジオボタン内側のスタイル */
input[type="radio"]::before {
  background-color: #1cb4d3;
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 14px;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
}
/* チェックされたらラジオボタン内側を表示 */
input[type="radio"]:checked::before {
  opacity: 1;
}
/* デフォルトのラジオボタンのスタイル */
input[type="radio"] {
  appearance: none; /* デフォルトのスタイルを消す */
  border: 1px solid #1cb4d3;
  border-radius: 50%;
  height: 20px;
  left: -.5em; /* ラジオボタンとラベルの余白 */
  margin: 0;
  position: relative;
  width: 20px;
}

ポイントをいくつか解説します。

 

コード解説

まずは、appearance: none;でデフォルトのラジオボタンのスタイルを消しています。

そして、自分でラジオボタンのスタイルを書きます。

/* デフォルトのラジオボタンのスタイル */
input[type="radio"] {
  appearance: none; /* デフォルトのスタイルを消す */
  border: 1px solid #1cb4d3; /* 枠線 */
  border-radius: 50%; /* 枠線を円にする */
  height: 20px; /* ボタンの高さ */
  left: -.5em; /* ラジオボタンとラベルの余白 */
  margin: 0; /* デフォルトのmarginを消す */
  position: relative;
  width: 20px; /* ボタンの幅 */
}

ここでdisplay: none;にしてしまうと、inputをtabキーでフォーカスできなくなりアクセシビリティ的に良くないので、それはやめましょう。

こちらは、チェックされたときのラジオボタンのスタイルです。

/* チェックされたラジオボタン内側のスタイル */
input[type="radio"]::before {
  background-color: #1cb4d3;
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 14px;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
}

これは擬似要素で作っていて、枠線内の上下左右に表示されるようにしています。

枠線内の上下左右にする部分はこちらです。

/* チェックされたラジオボタン内側のスタイル */
input[type="radio"]::before {
  bottom: 0;
  left: 0;
  margin: auto;
  right: 0;
  top: 0;
}

あとこれはチェックされる前の状態なので、opacity: 0;で透明にしています。

となると、あとはチェックされた後に、opacity: 1;にすればOKです。

/* チェックされたらラジオボタン内側を表示 */
input[type="radio"]:checked::before {
  opacity: 1;
}

:checkedが『チェックされたら』という意味になります。

あとはラジオボタンとラベルの上下を中央に揃えるのに、こちらのコードを書いています。

/* ラベルのスタイル */
label {
  align-items: center; /* 上下中央 */
  display: flex; /* 横並び */
}

 

デモ

デモはこちら。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

チェックすると、枠線内側に水色の丸が表示されます。


ラジオボタンの色だけ変える方法

先ほどはデザイン自体を変えましたが、色を変えるだけならこちらのコードだけでOKです。

input[type="radio"] {
  accent-color: blue;
}

デモはこちら。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回は、ラジオボタンを自由にカスタマイズする方法と、色だけ変える簡単な方法をご紹介しました。

ラジオボタンの色をサイトのテーマカラーに変えたいという場合や、デザインがされている場合は多いので、この記事を参考にできるようになっておきましょう。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作