選択できないラジオボタンを作る方法【HTML/CSS・サンプルコード付き】

選択肢・並び方・ボタンの形・サイズ・色・余白・角丸などを設定して、HTML・CSSを自動生成できます。

選択できないラジオボタンを作る方法

選択できないラジオボタンを作る方法を紹介します。ラジオボタンへdisabled属性を設定すると、その項目はクリックしても選択できなくなります。利用できないプランや在庫切れの商品、条件を満たしていない選択肢などを表示したい場合によく利用される機能です。

このサンプルではHTMLとCSSだけを使用し、JavaScriptを使わずに選択できないラジオボタンを実装しています。利用できる項目と利用できない項目を見た目で区別できるようにしているため、ユーザーにも分かりやすいフォームを簡単に作成できます。特別なライブラリは不要で、そのまま導入できる構成です。

配送方法や支払い方法、会員限定オプション、アンケートなど、条件によって選択できる項目を制限したい場面へ応用できます。項目名や無効化する選択肢、配色なども自由に変更できるため、さまざまなWebフォームへ利用しやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

カスタマイズについて 項目名や無効化するラジオボタン、配色は用途に合わせて自由に変更できます。

デモ

配送方法を選択

一部の項目は選択できない状態になっています。

通常配送お急ぎ便日時指定便（受付停止中）店舗受け取り（準備中）

disabled属性が付いた項目はクリックしても選択できません。利用できる項目のみ選択できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードをUTF-8へ設定 -->
  <meta charset="UTF-8">

  <!-- スマートフォンやタブレットの画面幅へ対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ブラウザのタブへ表示するページタイトル -->
  <title>選択できないラジオボタン</title>

  <!-- ラジオボタンのデザインを設定するCSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 選択できないラジオボタン全体 -->
  <div class="disabled-radio-button_wrap">

    <!-- ラジオボタンエリアのタイトル -->
    <div class="disabled-radio-button_title">
      配送方法を選択
    </div>

    <!-- ラジオボタンの状態を説明する文章 -->
    <p class="disabled-radio-button_text">
      一部の項目は選択できない状態になっています。
    </p>

    <!-- ラジオボタン一覧 -->
    <div class="disabled-radio-button_list">

      <!-- 通常配送の選択項目 -->
      <label class="disabled-radio-button_label">

        <!-- 通常配送を初期選択するラジオボタン -->
        <input
          class="disabled-radio-button_input"
          type="radio"
          name="delivery"
          value="normal"
          checked>

        <!-- 通常配送の項目名 -->
        <span class="disabled-radio-button_name">
          通常配送
        </span>

      </label>

      <!-- お急ぎ便の選択項目 -->
      <label class="disabled-radio-button_label">

        <!-- お急ぎ便を選択するラジオボタン -->
        <input
          class="disabled-radio-button_input"
          type="radio"
          name="delivery"
          value="express">

        <!-- お急ぎ便の項目名 -->
        <span class="disabled-radio-button_name">
          お急ぎ便
        </span>

      </label>

      <!-- 日時指定便の選択項目 -->
      <label class="disabled-radio-button_label">

        <!-- disabled属性で日時指定便を選択できない状態にする -->
        <input
          class="disabled-radio-button_input"
          type="radio"
          name="delivery"
          value="date"
          disabled>

        <!-- 日時指定便の項目名 -->
        <span class="disabled-radio-button_name">
          日時指定便（受付停止中）
        </span>

      </label>

      <!-- 店舗受け取りの選択項目 -->
      <label class="disabled-radio-button_label">

        <!-- disabled属性で店舗受け取りを選択できない状態にする -->
        <input
          class="disabled-radio-button_input"
          type="radio"
          name="delivery"
          value="store"
          disabled>

        <!-- 店舗受け取りの項目名 -->
        <span class="disabled-radio-button_name">
          店舗受け取り（準備中）
        </span>

      </label>

    </div>

    <!-- 選択できない項目について案内する補足文 -->
    <p class="disabled-radio-button_note">
      disabled属性が付いた項目はクリックしても選択できません。利用できる項目のみ選択できます。
    </p>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* 選択できないラジオボタン全体 */
.disabled-radio-button_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:760px; /* 全体の最大横幅。値を大きくすると表示領域が広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右を中央配置 */
  padding:36px; /* 全体の内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #dbe5f1; /* 全体を囲む枠線の太さ・種類・色 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.disabled-radio-button_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:30px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.disabled-radio-button_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくすると一覧との間隔が広がる */
  color:#64748b; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* ラジオボタン一覧 */
.disabled-radio-button_list{
  display:grid; /* 各ラジオボタンを縦方向へ配置 */
  gap:16px; /* 項目同士の間隔。値を大きくすると縦方向の余白が広がる */
}

/* 各ラジオボタン項目 */
.disabled-radio-button_label{
  display:flex; /* ラジオボタンと項目名を横並びにする */
  align-items:center; /* ラジオボタンと文字を縦方向の中央へ揃える */
  gap:14px; /* ラジオボタンと項目名の間隔。値を大きくすると間隔が広がる */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  min-height:62px; /* 項目の最小高さ。値を大きくするとタップ領域が高くなる */
  padding:18px 20px; /* 上下18px・左右20pxの内側余白。値を大きくすると項目が広くなる */
  border:2px solid #dbe5f1; /* 通常時の枠線の太さ・種類・色 */
  border-radius:14px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 通常時の背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  box-sizing:border-box; /* paddingとborderを横幅と高さへ含める */
}

/* ラジオボタン本体 */
.disabled-radio-button_input{
  width:22px; /* ラジオボタンの横幅。値を大きくすると横方向へ大きくなる */
  height:22px; /* ラジオボタンの高さ。値を大きくすると縦方向へ大きくなる */
  margin:0; /* ブラウザ標準の外側余白を削除 */
  accent-color:#2563eb; /* 選択時に表示する色 */
  flex-shrink:0; /* 横幅が狭くてもラジオボタンを縮めない */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 各項目の名前 */
.disabled-radio-button_name{
  color:#111827; /* 利用できる項目の文字色 */
  font-size:18px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字にする */
  line-height:1.5; /* 項目名の行間。値を大きくすると行間が広がる */
}

/* 選択できないラジオボタン本体 */
.disabled-radio-button_input:disabled{
  cursor:not-allowed; /* 選択できないことを示すカーソルへ変更 */
}

/* 選択できない項目名 */
.disabled-radio-button_input:disabled + .disabled-radio-button_name{
  color:#9ca3af; /* 選択できない項目の文字色を薄くする */
}

/* 選択できない項目全体 */
.disabled-radio-button_label:has(.disabled-radio-button_input:disabled){
  border-color:#e5e7eb; /* 選択できない項目の枠線色 */
  background:#f3f4f6; /* 選択できない項目の背景色 */
  cursor:not-allowed; /* 選択できないことを示すカーソルへ変更 */
}

/* 補足文 */
.disabled-radio-button_note{
  margin:28px 0 0; /* 上側28pxの余白。値を大きくすると一覧との間隔が広がる */
  color:#64748b; /* 補足文の文字色 */
  font-size:16px; /* 補足文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 補足文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 補足文を中央揃えにする */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小して画面を広く使う */
  }

  /* スマートフォン表示時の全体エリア */
  .disabled-radio-button_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
    padding:22px; /* 内側余白を22pxへ縮小して画面内へ収める */
  }

  /* スマートフォン表示時のタイトル */
  .disabled-radio-button_title{
    font-size:24px; /* タイトルの文字サイズを24pxへ縮小 */
  }

  /* スマートフォン表示時の選択項目 */
  .disabled-radio-button_label{
    padding:16px; /* 内側余白を16pxへ縮小して表示領域を確保 */
  }

  /* スマートフォン表示時の項目名 */
  .disabled-radio-button_name{
    font-size:16px; /* 項目名の文字サイズを16pxへ縮小 */
  }

}

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。「通常配送」「お急ぎ便」「日時指定便（受付停止中）」「店舗受け取り（準備中）」の4つのラジオボタンを配置し、disabled属性を指定した項目だけ選択できない状態にしています。選択できない項目は背景色・枠線・文字色を薄くして、利用できる項目との違いが分かるようにしています。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlはラジオボタン全体を構成するファイルです。4つのradio要素には共通のname="delivery"を指定しているため、利用できる項目から1つだけ選択できます。「通常配送」にはcheckedを指定しているため、ページを開いた時点では通常配送が選択されています。「日時指定便（受付停止中）」と「店舗受け取り（準備中）」にはdisabledを指定しているため、クリックしても選択できません。

style.cssはラジオボタン全体のデザインと、選択できない項目の表示を設定するファイルです。:disabledで選択できないラジオボタンと項目名を判定し、:has()を使ってdisabled属性が付いたradio要素を含む項目全体の背景色・枠線・カーソルを変更しています。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssを読み込む構成になっているため、JavaScriptや外部ライブラリは必要ありません。通常配送とお急ぎ便はクリックして選択できますが、disabled属性を指定した日時指定便と店舗受け取りは選択できません。

カスタマイズできる内容
index.htmlではタイトル、説明文、配送方法の項目名やvalue属性を変更できます。選択できない項目を変更する場合は、対象となるradio要素へdisabledを追加します。再び選択できる状態へ戻す場合はdisabledを削除します。初期選択を変更する場合は、現在「通常配送」へ指定しているcheckedを外し、最初に選択したいradio要素へ指定します。

style.cssでは全体の最大横幅、余白、枠線、角丸、項目同士の間隔、ラジオボタンの大きさ、文字サイズなどを変更できます。選択できない項目の見た目は.disabled-radio-button_input:disabledと.disabled-radio-button_label:has(.disabled-radio-button_input:disabled)で設定しているため、文字色・背景色・枠線色などをサイトに合わせて調整できます。

数値調整
style.css
padding:40px 20px;
ページ全体の余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

max-width:760px;
ラジオボタン全体の最大横幅です。値を大きくすると表示領域が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
ラジオボタン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:36px;
ラジオボタン全体の内側余白です。値を大きくすると内容と外枠との間隔が広がり、小さくすると狭くなります。

border:1px solid #dbe5f1;
ラジオボタン全体の枠線です。1pxを大きくすると枠線が太くなります。

border-radius:18px;
ラジオボタン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

margin:0 0 12px;
タイトル下側の余白です。12pxを大きくするとタイトルと説明文との間隔が広がります。

font-size:30px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.5;
タイトルの行間です。値を大きくすると複数行になったときの行間が広がります。

margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとラジオボタン一覧との間隔が広がります。

font-size:16px;・line-height:1.8;
説明文の文字サイズと行間です。font-sizeを大きくすると文字が大きくなり、line-heightを大きくすると行間が広がります。

gap:16px;
ラジオボタンの項目同士の間隔です。値を大きくすると上下の間隔が広がり、小さくすると近くなります。

gap:14px;
各項目内のラジオボタンと項目名との間隔です。値を大きくすると両者の間隔が広がります。

min-height:62px;
各項目の最小高さです。値を大きくすると項目が高くなり、クリックできる範囲も縦方向へ広がります。

padding:18px 20px;
各項目の内側余白です。上下の18pxを大きくすると項目が高くなり、左右の20pxを大きくすると内容と枠線との間隔が広がります。

border:2px solid #dbe5f1;
各項目の枠線です。2pxを大きくすると枠線が太くなります。

border-radius:14px;
各項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

width:22px;・height:22px;
ラジオボタン本体の大きさです。値を大きくするとラジオボタンが大きくなり、小さくすると小さくなります。

font-size:18px;・line-height:1.5;
項目名の文字サイズと行間です。font-sizeを大きくすると文字が大きくなり、line-heightを大きくすると行間が広がります。

margin:28px 0 0;
ラジオボタン一覧と補足文との間隔です。28pxを大きくすると間隔が広がり、小さくすると近くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。全体にはwidth:100%とmax-width:760pxを指定し、画面幅に合わせて横幅が縮小されるようにしています。画面幅640px以下ではページ全体をpadding:24px 12px;、ラジオボタン全体をmargin:24px auto;とpadding:22px;へ変更します。さらにタイトルをfont-size:24px;、各項目をpadding:16px;、項目名をfont-size:16px;へ縮小し、スマートフォンでも画面内へ収まりやすい表示に切り替えます。