チェックボックスのカスタマイズ。

フォームで複数項目を選択可能にする場合チェックボックスを使いますが、デザインによってカスタマイズしたいことありますよね。

まずはデフォルトのチェックボックス、そしてチェックボックス自体をカスタマイズしたものとボタン型にしたものの、3パターンをご紹介します。

デフォルトのチェックボックス
カスタマイズ①
カスタマイズ②

デフォルトのチェックボックス

htmlはこちら

<input type="checkbox" id="01-a">
<label for="01-a">AAAA</label>
    
<input type="checkbox" id="01-b">
<label for="01-b">BBBB</label>
    
<input type="checkbox" id="01-c">
<label for="01-c">CCCC</label>
    
<input type="checkbox" id="01-d">
<label for="01-d">DDDD</label>

inputもlabelもインライン要素なので、これだけで横並びになります。

cssはこちら。

label{
  margin-right: 20px;
  cursor: pointer;
}

labelにマージンいれて横の間隔を開けました。

カスタマイズ①

input type=”checkbox”で生成されるデフォルトのボックスを表示させないで、label要素の::befor, ::after 要素でチェックボックスを表示させます。

htmlはデフォルトと同じ書き方でOKですが、横並びにさせたい場合は、全体をdivタグで囲み、display:flexなどで横並びにさせます。

<div class="wrap">
        <input type="checkbox" id="02-a">
        <label for="02-a">AAAA</label>
  
        <input type="checkbox" id="02-b">
        <label for="02-b">BBBB</label>
  
        <input type="checkbox" id="02-c">
        <label for="02-c">CCCC</label>
  
        <input type="checkbox" id="02-d">
        <label for="02-d">DDDD</label>
</div>

cssで変更していきます。

cssはこちら。

.wrap{
  display: flex;
}
input[type=checkbox] {
  display: none;
}
label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 12px 35px;
  position: relative;
  width: 100%;
}    
label::before {
  background: #fff;
  border: 2px solid #d1d1d1;
  content: '';
  display: block;
  height: 20px;
  left: 5px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  width: 20px;
  border-radius: 3px;
}
label::after {
  border-right: 3px solid #ea545d;
  border-bottom: 3px solid #ea545d;
  content: '';
  display: block;
  height: 10px;
  left: 13px;
  margin-top: -7px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 6px;
}
input[type=checkbox]:checked + label::after {
  opacity: 1;
}
input[type=checkbox]:checked + label::before {
  background: #fff;
  border: 2px solid #ea545d;
  content: '';
  display: block;
  height: 20px;
  left: 5px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  width: 20px;
  border-radius: 3px;
}

label::beforeで四角を作成、

input要素がチェックされたときに、label::afterで設定したレ点が表示されるようにします。

カスタマイズ②

ボタンタイプのチェックボックスです。

htmlはこちら。

<div class="wrap">
        <label><input type="checkbox" class="js-filter" value="travel"><span>AAAA</span></label>
        <label><input type="checkbox" class="js-filter" value="entertainment"><span>BBBB</span></label>
        <label><input type="checkbox" class="js-filter" value="sports"><span>CCCC</span></label>
        <label><input type="checkbox" class="js-filter" value="gourmet"><span>DDDD</span></label>
</div>

label要素でinput要素を囲みます。文字表示はspanで囲んでます。

cssはこちら。

.wrap{
  display: flex;
}
input{
  display: none;
}
label{
  display: block;
  margin: 0;
  padding: 0;
  width: calc(25% - 5px);  
  margin-left: 5px;
}
label span{
  box-sizing: border-box;
  display: block;
  cursor: pointer;  
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #4F4F4F;
  background: #fff;  
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  border: #4065A2 solid 1px;
  border-radius: 4px;
}
label input:checked + span {
  color: #fff;
  background: #4065A2;
}

input要素自体は非表示にし、span要素でボタンを作成、input要素がチェックされたときにボタンの色が変化するようにしています。

サンプルはこちら。