HTML/CSS

【サンプルあり】CSSでシンプルおしゃれなチェックボックスをデザインする

  /

デフォルトのチェックボックスのスタイルはブラウザによって差異があり、スタイルを統一させるにはCSSでカスタマイズする必要があります。

今回はその方法をご紹介します。

Contents
  1. サンプル【コピペOK】
  2. 解説
  3. おわりに

サンプル【コピペOK】

See the Pen CSS Checkbox by POSIPAN (@posipan) on CodePen.

解説

HTML

チェックボックス1つ分のHTMLです。
チェックボックスとラベルは下記のように隣接させてください。

<div class="check_item">
    <input type="checkbox" name="check01" class="check" id="check01">
    <label for="check01">Item1</label>
  </div>

inputタグのid属性、labelタグのfor属性には同じ値を設定します。

これによりラベルとチェックボックスがリンクされ、ラベルをクリックした際にチェックボックスも反応するようになります。

SCSS

以下はチェックボックスに関連するCSSの抜粋になります。SCSSで記述しています。

.check {
  display: none; // チェックボックスを非表示
  
  &:checked {
    + label {
      &:after {
        opacity: 1;
      }
    }
  }
}

label {
  position: relative;
  padding-left: 45px;
  font-family: 'Lato', sans-serif;
  font-size: 28px;
  cursor: pointer;
  color: #121212;
  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
  }
  // チェックボックスの枠
  &:before {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 30px;
    height: 30px;
    border: 4px solid #30475E;
  }
  // チェックサイン
  &:after {
    top: 0px;
    left: 12px;
    width: 10px;
    height: 22px;
    border-bottom: 4px solid #F05454;
    border-right: 4px solid #F05454;
    transform: rotate(45deg);
    opacity: 0;
  }
}

チェックボックスはdisplay: none;で非表示にします。

.check {
  display: none; // チェックボックスを非表示
  
  &:checked {
    + label {
      &:after {
        opacity: 1;
      }
    }
  }
}

label要素に対して疑似要素を割り当てます。疑似要素beforeでチェックボックスの枠、同じく疑似要素のafterでチェックサインを作成します。

チェックサインはopacity: 0;で非表示にします。

label {
  position: relative;
  padding-left: 45px;
  font-family: 'Lato', sans-serif;
  font-size: 28px;
  cursor: pointer;
  color: #121212;
  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
  }
  // チェックボックスの枠
  &:before {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 30px;
    height: 30px;
    border: 4px solid #30475E;
  }
  // チェック部分
  &:after {
    top: 0px;
    left: 12px;
    width: 10px;
    height: 22px;
    border-bottom: 4px solid #F05454;
    border-right: 4px solid #F05454;
    transform: rotate(45deg);
    opacity: 0;
  }
}

以下はチェックボックスを非表示にする説明で記載したコードと同じです。

label要素で擬似的に作成したチェックボックスにチェックが入ると、display: none;で非表示にした本来のチェックボックス（input要素）にもチェックが入るようになります。

.check {
  display: none; // チェックボックスを非表示
  
  &:checked {
    + label {
      &:after {
        opacity: 1;
      }
    }
  }
}

おわりに

チェックボックスをカスタマイズする機会があまりなく、毎回調べては忘れてしまっていたので、備忘録として今回記事にさせていただきました✊

ではまた✋

関連記事