ラジオボタンのデザインですが、コーディング案件でしっかりデザインされていたら、デフォルトのデザインのままではダメな場合があります。
今回は、ラジオボタンを自由にカスタマイズする方法と、色だけ変える簡単な方法をご紹介します。
WordPressのプラグイン、Contact Form7のラジオボタンを変える方法は、以下の記事を参照下さい。
-
【Contact Form 7】ラジオボタンのデザインをカスタマイズする方法
続きを見る
同様に、Contact Form7のラジオボタンを画像に変える方法は、以下の記事を参照下さい。
-
【Contact Form 7】ラジオボタンを画像にカスタマイズする方法
続きを見る
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は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.
まとめ
今回は、ラジオボタンを自由にカスタマイズする方法と、色だけ変える簡単な方法をご紹介しました。
ラジオボタンの色をサイトのテーマカラーに変えたいという場合や、デザインがされている場合は多いので、この記事を参考にできるようになっておきましょう。
以上になります。
