Webデザイン

【PR】を含みます。

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

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

CSSでラジオボタンのデザインをカスタマイズする方法を解説します。

appearance: none;でデフォルトのスタイルを削除後、カスタムデザインを当ててカスタマイズします。

【テンプレート】ラジオボタンのデザインをカスタマイズ

サンプル

実装コード

HTML
Copy
  1. <label class="radio_container">
  2.   <input class="radio" type="radio" name="radio">
  3.   ラジオボタン
  4. </label>
  5. <label class="radio_container">
  6.   <input class="radio" type="radio" name="radio">
  7.   ラジオボタン
  8. </label>
CSS
Copy
  1. .radio_container {
  2.   display: inline-block;
  3.   cursor: pointer;
  4. }
  5.  
  6. /* 選択前のデザイン */
  7. .radio {
  8.   appearance: none; /* デフォルトスタイルを削除 */
  9.   -webkit-appearance: none; /* Safari and Chrome */
  10.   -moz-appearance: none; /* Firefox */
  11.   margin: 0;
  12.   margin-right: 3px;
  13.   width: 15px;
  14.   height: 15px;
  15.   vertical-align: middle;
  16.   border-radius: 100%;
  17.   border-width: 1px;
  18.   border-style: solid;
  19.   border-color: #c6c6c6;
  20.   background-color: #fff;
  21.   position: relative;
  22.   top: -2px;
  23. }
  24.  
  25. /* 選択後のデザイン */
  26. .radio:checked {
  27.   border-color: #f09896;
  28.   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23f09896" /></svg>');
  29.   background-size: 11px;
  30.   background-repeat: no-repeat;
  31.   background-position: center;
  32. }

コード解説

選択前のデザイン

appearance: none;
ラジオボタンのデフォルトスタイルを削除します。
これにより、カスタムスタイルが適用可能になります。
margin: 0;
ラジオボタンの余白をリセットします。
margin-right: 3px;
ラジオボタンの右側に3pxの余白を追加します。
width: 15px;
ラジオボタンの幅を指定します。
height: 15px;
ラジオボタンの高さを指定します。
vertical-align: middle;
ラジオボタンを縦方向に中央揃えします。
border-radius: 100%;
円にします。
border-width: 1px;
ボーダーの幅を指定します。
border-style: solid;
ボーダーのスタイルを指定します。
border-color: #c6c6c6;
ボーダーの色を指定します。
background-color: #fff;
背景色を設定します。
position: relative;
top: -2px;
ラジオボタンの位置を微調整します。

選択後のデザイン

.radio:checked
ラジオボタンが選択された状態のスタイルを指定できます。
border-color: #f09896;
選択されたときのボーダーの色を指定します。
background-image
SVG形式の円画像をデータURIとして埋め込んでいます。
これにより、外部画像を使用せずにを円を表示できます。
background-size: 11px;
背景画像のサイズを指定します。
background-repeat: no-repeat;
背景画像を繰り返さないようにします。
background-position: center;
背景画像を中央に配置します。

選択時のラジオボタンの円の色を変更

サンプル

実装コード

円の色は、SVG形式の円画像（background-image）のfill="%23468fd6"で指定しています。

fill="%23468fd6"の%23は # 記号に対応し、468fd6が16進数カラーコードです。

HTML
Copy
  1. <label class="radio_container">
  2.   <input class="radio2" type="radio" name="radio2">
  3.   ラジオボタン
  4. </label>
  5. <label class="radio_container">
  6.   <input class="radio2" type="radio" name="radio2">
  7.   ラジオボタン
  8. </label>
CSS
Copy
  1. .radio_container {
  2.   display: inline-block;
  3.   cursor: pointer;
  4. }
  5.  
  6. /* 選択前のデザイン */
  7. .radio2 {
  8.   appearance: none; /* デフォルトスタイルを削除 */
  9.   -webkit-appearance: none; /* Safari and Chrome */
  10.   -moz-appearance: none; /* Firefox */
  11.   margin: 0;
  12.   margin-right: 3px;
  13.   width: 15px;
  14.   height: 15px;
  15.   vertical-align: middle;
  16.   border-radius: 100%;
  17.   border-width: 1px;
  18.   border-style: solid;
  19.   border-color: #468fd6;
  20.   background-color: #fff;
  21.   position: relative;
  22.   top: -2px;
  23. }
  24.  
  25. /* 選択後のデザイン */
  26. .radio2:checked {
  27.   border-color: #468fd6;
  28.   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23468fd6" /></svg>');
  29.   background-size: 11px;
  30.   background-repeat: no-repeat;
  31.   background-position: center;
  32. }

ラジオボタンにホバーアニメーションを実装

サンプル

実装コード

HTML
Copy
  1. <label class="radio_container">
  2.   <input class="radio3" type="radio" name="radio3">
  3.   ラジオボタン
  4. </label>
  5. <label class="radio_container">
  6.   <input class="radio3" type="radio" name="radio3">
  7.   ラジオボタン
  8. </label>
CSS
Copy
  1. .radio_container {
  2.   display: inline-block;
  3.   cursor: pointer;
  4. }
  5.  
  6. /* 選択前のデザイン */
  7. .radio3 {
  8.   appearance: none; /* デフォルトスタイルを削除 */
  9.   -webkit-appearance: none; /* Safari and Chrome */
  10.   -moz-appearance: none; /* Firefox */
  11.   margin: 0;
  12.   margin-right: 3px;
  13.   width: 15px;
  14.   height: 15px;
  15.   vertical-align: middle;
  16.   border-radius: 100%;
  17.   border-width: 1px;
  18.   border-style: solid;
  19.   border-color: #c6c6c6;
  20.   background-color: #fff;
  21.   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23dfb1b0" /></svg>');
  22.   background-size: 0px;
  23.   background-repeat: no-repeat;
  24.   background-position: center;
  25.   position: relative;
  26.   top: -2px;
  27.   transition: 0.3s;
  28. }
  29.  
  30. /* ホバー時のデザイン */
  31. .radio3:hover {
  32.   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23dfb1b0" /></svg>');
  33.   background-size: 11px;
  34.   background-repeat: no-repeat;
  35.   background-position: center;
  36. }
  37.  
  38. /* 選択後のデザイン */
  39. .radio3:checked {
  40.   border-color: #f09896;
  41.   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23f09896" /></svg>');
  42.   background-size: 11px;
  43.   background-repeat: no-repeat;
  44.   background-position: center;
  45. }

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-Webデザイン
-,