1. HOME
  3. CSS

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

ASAI

ASAI

投稿日

更新日

今回はチェックボックス・ラジオボタンの見た目を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を使用しましたが、inputタグにwidthやheightを指定することも可能です。

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

accent-color は CSS のプロパティで、一部の要素で生成されるユーザーインターフェイス要素の強調表示色を設定します。

accent-color – CSS: カスケーディングスタイルシート | MDN

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

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

色や大きさだけなら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にする」という意味になります。

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

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

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

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の擬似要素で下記のものを作成します。

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

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

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の擬似要素で下記のものを作成します。

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

チェックのアイコンはチェックボックスの作成方法と同様で、最初は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キーを使用してチェックをする場合、チェックボックスはスペースキー、ラジオボタンはカーソルキーでチェックすることができます。ぜひやってみてください。

まとめ

今回はチェックボックス・ラジオボタンを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…
ASAI

ASAI

WEBコーダー

株式会社RETVALでHTML/CSS、WordPressのコーディングを担当。

  • HTML
  • CSS
  • WordPress

関連記事

【CSS】点線を作成しよう！自由に間隔を指定する方法も紹介します

【CSS】トリミングできる！object-fitの使い方と配置について

HTML/CSSを学べるおすすめの学習サイト

Web制作を学べるおすすめ学習サイト