チェック時に色が変わるチェックボックスを作る方法【HTML/CSS・サンプルコード付き】

項目・並び方向・サイズ・色・枠線・角丸などを設定して、HTML・CSSを自動生成できます。

チェックすると色が変わるチェックボックスの作り方

チェックすると色が変わるチェックボックスの作り方を、HTMLとCSSのサンプルコードを使って紹介します。通常時は白い背景と濃い文字色で表示し、チェックすると項目全体の背景色が薄いブルーに変わり、枠線と文字色もブルーへ切り替わるデザインです。チェック状態を色の変化でも確認できるため、どの項目を選択しているのか視覚的に分かりやすくできます。

サンプルではHTML、CSS、JavaScript、PHPの4つのチェックボックスを縦に並べ、それぞれを個別に選択・解除できます。チェック状態の判定にはHTML標準のチェックボックスとCSSの:checkedを使用し、項目全体のデザイン変更には:has()を利用します。JavaScriptを使わず、HTMLとCSSだけでチェック状態に応じた背景色、枠線、文字色の切り替えを実装できます。

お問い合わせ画面の選択項目、会員サイトの設定画面、ECサイトのオプション選択、管理画面の機能選択など、複数の項目から必要なものを選択する場面で利用できます。通常時とチェック時の背景色や文字色、枠線、チェックボックスの色などはCSSから変更できるため、サイトのデザインに合わせたカスタマイズも可能です。画面幅が狭い場合には余白や文字サイズを調整し、スマートフォンでも操作しやすい表示にしています。

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

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

色が変わるチェックボックス

チェックすると背景色と文字色が変わります。

HTML CSS JavaScript PHP

チェックボックスをクリックすると、選択した項目の背景色・枠線・文字色が変わる動作を確認できます。

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

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

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>色が変わるチェックボックス</title>

  <link
    rel="stylesheet"
    href="style.css"
  >

</head>

<body>

  <!-- チェックボックス全体 -->
  <div class="color-change-checkbox_wrap">

    <!-- チェックボックス一覧 -->
    <div class="color-change-checkbox_list">

      <!-- HTML -->
      <label class="color-change-checkbox_label">

        <input
          class="color-change-checkbox_input"
          type="checkbox"
          name="skills[]"
          value="html"
        >

        <span class="color-change-checkbox_name">
          HTML
        </span>

      </label>

      <!-- CSS -->
      <label class="color-change-checkbox_label">

        <input
          class="color-change-checkbox_input"
          type="checkbox"
          name="skills[]"
          value="css"
        >

        <span class="color-change-checkbox_name">
          CSS
        </span>

      </label>

      <!-- JavaScript -->
      <label class="color-change-checkbox_label">

        <input
          class="color-change-checkbox_input"
          type="checkbox"
          name="skills[]"
          value="javascript"
        >

        <span class="color-change-checkbox_name">
          JavaScript
        </span>

      </label>

      <!-- PHP -->
      <label class="color-change-checkbox_label">

        <input
          class="color-change-checkbox_input"
          type="checkbox"
          name="skills[]"
          value="php"
        >

        <span class="color-change-checkbox_name">
          PHP
        </span>

      </label>

    </div>

  </div>

</body>

</html>

/* =========================================
   基本
========================================= */

*{
  box-sizing:border-box;
}

/* ページ全体 */
body{
  margin:0;
  padding:40px 20px; /* 上下左右の余白。値を大きくするとページ端との間隔が広がる */
  background:#ffffff;
  color:#111827;
  font-family:sans-serif;
}


/* =========================================
   チェックボックス全体
========================================= */

/* 外側 */
.color-change-checkbox_wrap{
  width:100%;
  max-width:720px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:0 auto;
  padding:32px; /* 内側の余白。値を大きくすると周囲の余白が広がる */
  border:1px solid #dbe4f0; /* 外側の枠線 */
  border-radius:18px; /* 角丸。値を大きくするとより丸くなる */
  background:#f8fafc;
}

/* チェックボックス一覧 */
.color-change-checkbox_list{
  display:grid;
  gap:12px; /* 項目同士の間隔。値を大きくすると上下の間隔が広がる */
}


/* =========================================
   各チェックボックス
========================================= */

/* 各項目 */
.color-change-checkbox_label{
  display:flex;
  align-items:center;
  gap:16px; /* チェックボックスと文字の間隔。値を大きくすると離れる */
  min-height:64px; /* 項目の最小高さ。値を大きくすると縦方向に広がる */
  padding:14px 18px; /* 項目内の上下・左右余白 */
  border:1px solid #dbe4f0; /* 通常時の枠線 */
  border-radius:12px; /* 項目の角丸。値を大きくするとより丸くなる */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  cursor:pointer;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease; /* 0.2秒で色を切り替える。値を大きくすると変化がゆっくりになる */
}

/* 標準チェックボックス */
.color-change-checkbox_input{
  width:22px; /* 横幅。値を大きくするとチェックボックスが大きくなる */
  height:22px; /* 高さ。値を大きくするとチェックボックスが大きくなる */
  margin:0;
  flex:0 0 auto;
  accent-color:#2563eb; /* チェック時のチェックボックスの色 */
  cursor:pointer;
}

/* 項目名 */
.color-change-checkbox_name{
  color:inherit;
  font-size:18px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700;
  line-height:1.5; /* 行の高さ。値を大きくすると行間が広がる */
}


/* =========================================
   チェック時
========================================= */

/* チェックした項目の色を変更 */
.color-change-checkbox_label:has(
  .color-change-checkbox_input:checked
){
  border-color:#2563eb; /* チェック時の枠線色 */
  background:#eaf2ff; /* チェック時の背景色 */
  color:#2563eb; /* チェック時の文字色 */
}

/* キーボード操作時のフォーカス */
.color-change-checkbox_label:has(
  .color-change-checkbox_input:focus-visible
){
  outline:3px solid rgba(37,99,235,.22); /* フォーカス枠の太さと色 */
  outline-offset:3px; /* フォーカス枠との間隔。値を大きくすると外側へ離れる */
}


/* =========================================
   レスポンシブ
========================================= */

@media (max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* 640px以下でページ周囲の余白を小さくする */
  }

  /* 外側 */
  .color-change-checkbox_wrap{
    padding:24px 18px; /* 640px以下で内側の余白を小さくする */
  }

  /* 各項目 */
  .color-change-checkbox_label{
    gap:14px; /* 640px以下でチェックボックスと文字の間隔を小さくする */
    padding:14px; /* 640px以下で項目内の余白を小さくする */
  }

  /* 項目名 */
  .color-change-checkbox_name{
    font-size:16px; /* 640px以下で文字を小さくする */
  }

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではHTML、CSS、JavaScript、PHPの4つのチェックボックスを縦に配置し、CSSでは通常時とチェック時の背景色・枠線・文字色を設定します。JavaScriptは使用せず、HTML標準のチェックボックスとCSSだけで色の切り替えを行います。

チェック状態の判定には:checkedを使用し、チェックされたinput要素を含むlabel要素には:has()でスタイルを適用します。これにより、チェックボックス本体だけでなく、その項目全体の背景色・枠線・文字色をまとめて変更できます。

外部ライブラリや画像、外部サービスなどは使用していません。配布するファイルはindex.htmlとstyle.cssだけなので、2つのファイルを同じsampleフォルダへ保存してブラウザで開けば動作を確認できます。

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

各ファイルの役割
index.htmlはチェックボックスの内容を構成するファイルです。HTML、CSS、JavaScript、PHPの4項目があり、それぞれ独立してチェックを付けたり外したりできます。項目名を変更する場合は、各span要素の文字を編集します。フォームで使用する値を変更する場合は、各input要素のnameやvalueを用途に合わせて編集できます。

style.cssはチェックボックス全体の配置とデザインを設定するファイルです。通常時の背景色・枠線・文字色、チェック時の背景色・枠線・文字色、チェックボックス本体の色、項目の余白や角丸などを変更できます。チェックされた項目には:has(.color-change-checkbox_input:checked)で別のスタイルを適用しています。

設置方法・使い方
sampleフォルダを作成し、その中へindex.htmlとstyle.cssを保存します。2つのファイルは同じ階層へ配置してください。index.htmlからstyle.cssを読み込む構成になっているため、ファイル名や配置場所を変更する場合はHTML側のhref="style.css"も実際の場所に合わせて変更します。

ファイルを配置したらsample/index.htmlをブラウザで開きます。チェックボックスをクリックまたはタップするとチェック状態が切り替わり、チェックした項目は薄いブルーの背景、ブルーの枠線、ブルーの文字色へ変化します。チェックを外すと通常時の色へ戻ります。

カスタマイズできる内容
index.htmlでは、HTML、CSS、JavaScript、PHPという項目名を用途に合わせて変更できます。各チェックボックスのnameとvalueも変更できるため、実際に使用するフォームの項目に合わせて設定できます。

style.cssでは、.color-change-checkbox_labelに指定しているbackground:#ffffff;で通常時の背景色、borderで枠線、color:#111827;で文字色を変更できます。

チェック時の色は.color-change-checkbox_label:has(.color-change-checkbox_input:checked)で変更します。background:#eaf2ff;がチェック時の背景色、border-color:#2563eb;が枠線色、color:#2563eb;が文字色です。チェックボックス本体の色はaccent-color:#2563eb;から変更できます。

数値調整
style.css
max-width:720px;
チェックボックス全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

padding:32px;
チェックボックス全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
チェックボックス全体を囲む外枠の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

gap:12px;
各チェック項目の上下間隔です。値を大きくすると項目同士が離れ、小さくすると間隔が狭くなります。

gap:16px;
各項目内にあるチェックボックスと文字の間隔です。値を大きくすると両者の間隔が広がります。

min-height:64px;
各チェック項目の最小高さです。値を大きくすると項目が縦方向に大きくなります。

padding:14px 18px;
各チェック項目の内側余白です。14pxが上下、18pxが左右の余白です。値を大きくすると項目内の余白が広がります。

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

width:22px;・height:22px;
チェックボックス本体の大きさです。両方の値を大きくするとチェックボックスが大きくなり、小さくすると小さくなります。

font-size:18px;
項目名の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

transition:0.2s;
背景色・枠線色・文字色が切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く色が切り替わります。

outline:3px solid rgba(37,99,235,.22);
キーボード操作でフォーカスしたときに表示する外枠です。3pxを大きくするとフォーカス枠が太くなります。

outline-offset:3px;
チェック項目とフォーカス枠の間隔です。値を大きくするとフォーカス枠が項目から外側へ離れます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;とmax-width:720px;によって、チェックボックス全体が利用できる画面幅に合わせて縮小されます。

画面幅が640px以下になると、メディアクエリによってページ全体の余白を24px 12px、チェックボックス全体の内側余白を24px 18pxへ変更します。また、各項目の間隔を14px、内側余白を14px、文字サイズを16pxへ調整します。これにより、スマートフォン・タブレット・PCの画面幅に合わせて表示できます。