1. HOME
  3. CSS

【CSS】チェックボックス・ラジオボタンの見た目をカスタマイズする方法

MORIYAMA

MORIYAMA

投稿日

更新日

今回はチェックボックス・ラジオボタンの見た目をCSSでカスタマイズする方法について解説します。

この方法を知ることで、デフォルトのデザインではなく自由に見た目をカスタマイズすることができます。

一緒に理解を深めていきましょう。

チェックボックス・ラジオボタンの基本

チェックボックス・ラジオボタンはお問い合わせフォームや資料請求ページ等でよく使用されます。

その違いは下記の箇所です。

  • チェックボックス → 複数選択できる
  • ラジオボタン → 一つだけ選択できる

質問の用途によって使い分けることでユーザーにとってわかりやすいサイトになるため、基本的なことですが違いを理解しておきましょう。

また、チェックボックス・ラジオボタンはHTMLを書くだけでCSSを調整しなくても最初から使用できるようにデザインされています。

実際に下記のHTMLでこのようにブラウザに表示されます。

<!-- HTML -->
<form action="#" method="get">
  <div class="checkbox-group">
    <p>【好きなフルーツ】</p>
    <ul>
      <li>
        <label>
          <input type="checkbox" name="fruits" value="りんご">りんご
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="fruits" value="みかん">みかん
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="fruits" value="バナナ">バナナ
        </label>
      </li>
    </ul>
  </div>
  <div class="radio-group">
    <p>【一番好きなフルーツ】</p>
    <ul>
      <li>
        <label>
          <input type="radio" name="favorite" value="りんご">りんご
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="favorite" value="みかん">みかん
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="favorite" value="バナナ">バナナ
        </label>
      </li>
    </ul>
  </div>
</form>

チェックされている項目の前にボックスがあったり、色が変更されたりしているので見た瞬間に誰でもわかるようになっています。

チェックボックス・ラジオボタンの見た目を少し変える時

基本のデザインを利用し、少しのCSSを追加することで色や大きさをある程度変更することができます。

こちらの画像はCSSで少し見た目を変更したものです。

CSSには下のように記述しました。

/* CSS */
form input {
  display: inline-block;
  margin-right: 8px;
  transform: scale(1.5);
  accent-color: pink;
}

transform: scale(1.5);で1.5倍の大きさになっています。

今回はtransformを使用しましたが、inputタグにwidthやheightを指定することも可能です。

accent-colorはチェックボックスやラジオボタン、プログレスバーの色を簡単に変更することができます。詳しい説明は下記をご覧ください。

豊富なオリジナルブロックでLPをかんたんに作成できるLP Creator

LPをかんたんに作成できるLP Creator

デザイン・機能・SEO・収益化にこだわったメディア運営者向け「STREETIST」

デザイン・機能・速度・SEO・収益化にこだわった、ブロガー・メディア運営者向けのデザインテーマ STREETIST

accent-colorとは？

2024年以降、主要ブラウザがaccent-colorプロパティに対応したことで、チェックボックスやラジオボタン、プログレスバー、レンジスライダーなどの「色」をCSS一行で変更できるようになりました。（※ IEは非対応)

この accent-color プロパティを使うことで、「色」だけの変更なら、従来のような複雑なカスタマイズや疑似要素を使わず、ブラウザの標準UIを保ったまま、手軽に変更できます。

以下のように指定するだけで色が変更できます。

input[type="checkbox"],
input[type="radio"],
progress,
input[type="range"] {
  accent-color: #e91e63; /* お好みの色を指定 */
}

指定できるのは「単色のカラー」（RGB値、16進カラー、カラーワードなど）のみに限られます。

グラデーション（linear-gradient()など）や透明度（opacity、rgba(0,0,0,0.5)など）は非推奨です。

transform: scale(1.5);は大きさだけ、accent-colorは色だけの単純なカスタマイズのため、次のセクションからは「色」や「大きさ」だけでなく、チェックボックス・ラジオボタンをフルカスタマイズする方法について解説します。

チェックボックス・ラジオボタンのフルカスタマイズ

チェックボックス・ラジオボタンの見た目を大きく変えるのは少し大変

色や大きさだけならCSSで簡単に変更することができましたが、チェックボックスのアイコンやラジオボタンの中の円の大きさ等、見た目を大きく変更するときは少し手間がかかります。

その理由はこちらです。

  • 基本のデザインを一度打ち消す必要がある
  • スタイルを一から書き直す必要がある
  • 疑似要素を使うため疑似要素の知識が必要

見た目を大きく変更する場合、基本のデザインを応用して変更することはできません。

手間はかかりますが、その分自由なデザインのチェックボックス・ラジオボタンが作成できます。

ポイントを抑えればどんなデザインも作れる

これから紹介する4つのポイントを抑えることで、様々なデザインのチェックボックス・ラジオボタンを作成することができます。

一つずつ順番に見ていきましょう。

基本のデザインを全て打ち消す方法は注意が必要

デザインを打ち消す際にdisplay:noneを使用することが浮かびますが、display:noneを使用するとタブ操作やスクリーンリーダーで読み込むことができなくなるためお勧めしません。

代わりに以下のようなクラスをinput要素に追加します。

/* CSS */
.visibility-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.visibility-hiddenはBootstrapのコードを参考に作成しました。

ブラウザからは見えないですが、存在するものとして機械が判断し、タブ操作やスクリーンリーダーで読み込むことができます。

※参考：Why and How the Bootstrap sr-only Class is Used

ラベルをspan要素で囲う＆カーソルを指定しよう

基本のデザインを打ち消したら、ここからは自由に見た目を変更することができます。

この場合、実装しやすくするためにテキストをspan要素で囲っておくと良いでしょう。

<!-- HTML -->
<label>
  <input class="visibility-hidden" type="checkbox" name="fruits" value="りんご">
  <span class="checkbox-text">りんご</span>
</label>

そして、以下のようにCSSを記述します。ポイントはカーソルの指定です。

/* CSS */
.checkbox-text {
  cursor: pointer;
  display: inline-block;
  padding: 5px 0 5px 30px;
  position: relative;
}

カーソルを指定することでクリックできることを視覚的に伝えることができます。細かいですが、指定しておくと親切です。

疑似要素を使いこなす

チェックボックスやラジオボタンのデザインはラベルを囲ったspan要素の疑似要素で作成するとわかりやすいでしょう。

CSSだけで記述するので基本的な疑似要素の書き方の理解が必要です。

後半で実際に記述したコードを載せるので参考にしてみてください。

input:checkedを使いこなす

基本的なデザインを打ち消すと、チェックボックス・ラジオボタンをクリックした時に色が変化するという実装を自分でしなければいけません。

その際に理解しておきたいのが、input:checkedです。

input:checkedは「inputタグがチェックされた時」という意味で、チェックされた時のデザインをinput:checkedを使用して記述します。

例えばこのように記述します。

input[type=checkbox]:checked {
  opacity: 1;
}

上のコードは「inputタグがチェックされた時、opacity: 1にする」(表示させる）という意味になります。

なお、opacityは透過のプロパティで、0で完全透明、1で表示です。0.5にすると半透明になります。

実際にチェックボックス・ラジオボタンの見た目を大きく変えてみよう

今回はこのようなチェックボックス・ラジオボタンを作成してみたいと思います。

DEMOはこちら

この実装はこちらのコードでできています。

HTML

<form action="#" method="get">
  <div class="checkbox-group">
    <p>【好きなフルーツ】</p>
    <ul>
      <li>
        <label>
          <input class="visibility-hidden" type="checkbox" name="fruits" value="りんご">
          <span class="checkbox-text">りんご</span>
        </label>
      </li>
      <li>
        <label>
          <input class="visibility-hidden" type="checkbox" name="fruits" value="みかん">
          <span class="checkbox-text">みかん</span>
        </label>
      </li>
      <li>
        <label>
          <input class="visibility-hidden" type="checkbox" name="fruits" value="バナナ">
          <span class="checkbox-text">バナナ</span>
        </label>
      </li>
    </ul>
  </div>
  <div class="radio-group">
    <p>【一番好きなフルーツ】</p>
    <ul>
      <li>
        <label>
          <input class="visibility-hidden" type="radio" name="favorite" value="りんご">
          <span class="radio-text">りんご</span>
        </label>
      </li>
      <li>
        <label>
          <input class="visibility-hidden" type="radio" name="favorite" value="みかん">
          <span class="radio-text">みかん</span>
        </label>
      </li>
      <li>
        <label>
          <input class="visibility-hidden" type="radio" name="favorite" value="バナナ">
          <span class="radio-text">バナナ</span>
        </label>
      </li>
    </ul>
  </div>
</form>

CSS

/* 共通 */
.visibility-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.checkbox-text,
.radio-text {
  cursor: pointer;
  display: inline-block;
  padding: 5px 0 5px 30px;
  position: relative;
}

/* チェックされたら表示 */
input[type=checkbox]:checked+.checkbox-text::after,
input[type=radio]:checked+.radio-text::after {
  opacity: 1;
}


/* チェックボックス */
.checkbox-text::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  border: 1px solid #777;
}

/* チェックのアイコン */
.checkbox-text::after {
  content: "";
  display: block;
  width: 5px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: rotate(35deg) skewY(16deg) translateY(-50%);
  transform-origin: center right;
  border-right: 2px solid #FF0001;
  border-bottom: 2px solid #FF0001;
  opacity: 0; /* 透明 */
}


/* ラジオボタン */
.radio-text::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #777;
  border-radius: 50%;
}

/* ラジオボタンのアイコン */
.radio-text::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0; /* 透明 */
}

それでは内容をチェックボックスとラジオボタンにわけて順番に見ていきましょう。

チェックボックス

チェックボックスは.checkbox-textの擬似要素で下記のものを作成します。

  • チェックボックスの枠
  • チェックのアイコン

before（.checkbox-text::before）はチェックボックスの枠の表示に使います。

こちらにチェックボックスのデザインや表示位置を指定します。
border: 1px solid #777;　で線の色を #777 に変更しています。

after（.checkbox-text::after） はチェックされた時に表示されるアイコンのデザインと表示になっています。

チェックのアイコンはopacity:0にして透明にしておき、input:checkedの時にopacity:1で見えるように実装します。

CSSの該当箇所はこちらです。

/* チェックボックスの枠 */
.checkbox-text::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  border: 1px solid #777;
}

/* チェックのアイコン */
.checkbox-text::after {
  content: "";
  display: block;
  width: 5px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: rotate(35deg) skewY(16deg) translateY(-50%);
  transform-origin: center right;
  border-right: 2px solid #FF0001;
  border-bottom: 2px solid #FF0001;
  opacity: 0;
}

/* チェックされた時 */
input[type=checkbox]:checked+.checkbox-text::after,
input[type=radio]:checked+.radio-text::after {
  opacity: 1;
}

チェックアイコンのtransform部分が少しややこしいですが、コピペして実際に値を変えたり数字を変化させたりして触ってみてください。

ラジオボタン

ラジオボタンは.radio-textの擬似要素で下記のものを作成します。

  • ラジオボタンの枠
  • チェックのアイコン

こちらも同じく ラジオボタンの枠はbeforeで、チェックのアイコンはafterで、デザインや位置を設定しています。

チェックのアイコンはチェックボックスの作成方法と同様で、最初はopacity:1にして透明にしておき、input:checkedの時にopacity:0で見えるように実装します。

CSSの該当箇所はこちらです。

/*ラジオボタンの枠 */
.radio-text::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #777;
  border-radius: 50%;
}

/* チェックのアイコン */
.radio-text::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0;
}

/* チェックされた時 */
input[type=checkbox]:checked+.checkbox-text::after,
input[type=radio]:checked+.radio-text::after {
  opacity: 1;
}

簡単に作成できましたね。

tabキーを使用してチェックをする場合、チェックボックスはスペースキー、ラジオボタンはカーソルキーでチェックすることができます。ぜひやってみてください。

今回紹介したサンプルも、border の種類や太さを変えたり、background-color や box-shadow を加えたりするだけで、まったく違う印象に仕上げることができます。

/* サンプル: 枠線と影をカスタマイズ */
.checkbox-text::before {
  border: 2px solid #4caf50;
  background-color: #f4fff4;
  box-shadow: 0 0 4px #b2ffb2;
}

.radio-text::before {
  border: 2px dashed #2196f3;
  background-color: #f0f8ff;
}

少しずつ値を変えたり、CSSプロパティを追加したりして、自分だけのオリジナルデザインをぜひ作ってみてください。

まとめ

今回はチェックボックス・ラジオボタンをCSSでカスタマイズする方法について解説しました。

デフォルトのデザインのままではなく、自由に見た目をカスタマイズすることができしたね。

サイト全体の印象を崩さないためにも、覚えておくと使える場面があると思うのでぜひ覚えておいてください。

わからなくなった時はこの記事を読み返して参考にしてもらえたら幸いです。

その他の記事

【CSS】positionのrelative、absolute、fixed、stickyの使い...

【CSS】positionのrelative、absolute、fixed、stickyの使い…

今回は、CSSのpositionプロパティについて詳しく解説します。positionはレイアウトに必…
【CSS】display: contents の使用方法！便利な使い方を例を交...

【CSS】display: contents の使用方法！便利な使い方を例を交…

今回は「display: contents」について解説します。displayプロパティはよく使用す…
【CSS】line-heightをちゃんと理解しよう！図を用いて解説します

【CSS】line-heightをちゃんと理解しよう！図を用いて解説します

今回はCSSのプロパティ「line-height」について解説します。コーディングをしているとlin…
MORIYAMA

MORIYAMA

フロントエンジニア、WEBコーダー

株式会社トミワテックでWordPressのコーディングを担当。

  • JavaScript
  • PHP
  • WordPress
  • HTML
  • CSS

関連記事

CSSの単位まとめ｜px・em・rem・%の違いとvw/vh・clamp・calcの使い方をわかりやすく解説
【CSS】Grid Layout（display: grid）の基本ガイド 

【CSS】Grid Layout（display: grid）の基本ガイド 

【CSS】Flexbox（display: flex）の使い方 完全ガイド
【CSS】カスタムプロパティ（変数）とは？使い方やSASSとの違いを徹底解説

【CSS】カスタムプロパティ（変数）とは？使い方やSassとの違いを徹底解説