ジャンルを問わず管理人の気になったことや調べたことを、実際にやってみたりした記録

チェックボックスを(ちょっとだけ)オシャレにしよう!

CSSで素っ気ないチェックボックスをオシャレにしてみた


チェックボックスはウェブサイトのフォームの入力項目のひとつであるがこのチェックボックスの形はブラウザなどによって変わることがなく、HTMLの指定で変えることもできない。そこで、ラベルとCSSの定義で任意の形に変える方法を探してみた


事前にやること

チェックボックスにラベルを付ける

通常のチェックボックスは□をクリックしないと切り替わらない。チェックボックスに続く文字列をクリックしてもチェックが切り替わるようにするためにはlabelタグを使う。labelタグはinputのidとlabelタグのforで指定する名称を一致させる。

labelがないとき

labelがないと、チェックボックスの□をクリックしないと反応しない。

<input type="checkbox">labelタグがないとき

↓「labelタグがないとき」をクリックしてもチェックボックスは反応しない。

labelタグがないとき

labelがあるとき

labelタグを連携させておくと、labelタグで囲まれた文字列をクリックしたときもチェックボックスが反応する。

<input type="checkbox" id="exist-label">
<label for="exist-label">labelタグがあるとき</label>

↓では、「タグがあるとき」をクリックするとチェックボックスが反応する。

CSSの疑似要素

CSSの疑似要素とは、「HTMLには書かれていない要素(もどき)を作るカラクリ」である。疑似要素にはbeforeとafterがあり、それぞれに「::」(コロンを2つ)を前置する。
「::before」で要素の直前に追加する内容を定義する。「::after」で要素の直後に追加する内容を定義する。

.pseudo-element::before {
  content: 'ロビンソンクルーソー';
  color:#00ff00;
}
.pseudo-element::after {
  content: 'の冒険';
  color:#ff0000;
}
<div class="pseudo-element">元の文字列</div>

と記述すると、

元の文字列

となる。

チェックボックスがオシャレになるようにCSSを考える

装飾を入れるチェックボックスの元ネタを定義する。

<div class="decoration-cb-sample">
  <input type="checkbox" id="cb1" value="1"><label for="cb1">寿限無寿限無</label>
  <input type="checkbox" id="cb2" value="2" checked><label for="cb2">五劫のすりきれ</label>
  <input type="checkbox" id="cb3" value="3"><label for="cb3">海砂利水魚の水行末</label>
</div>

CSSの定義

ここではチェックボックスに装飾を入れるCSSを4つのパートに分ける。
セレクタの先頭に「 .decoration-cb-sample 」を入れることで「decoration-cb-sampleの配下」を指定する。

チェックボックスを消す

/* 元々のチェックボックスを消す */
.decoration-cb-sample input[type="checkbox"] {
  display: none;
}

自前の□を表示するため、displayで元々表示されている□を非表示にする

ラベル領域の定義

自前の□を定義するための、ラベルの領域の定義をする。

/* ラベルの定義 */
.decoration-cb-sample input[type="checkbox"]+label {
  padding-left: 25px;
  padding-right: 10px;
  cursor: pointer;
  position: relative;
  display: inline-block;
}
padding-leftと padding-right ラベル文字列の左右の隙間を作る。padding-leftは□の分だけ値を大きくする。
display ラベル文字列の幅に合わせた大きさにする。

自前のチェックボックスの定義

ラベル文字列の左に□を表示する。

/* ラベルの左に表示する正方形のボックス□ */
.decoration-cb-sample input[type="checkbox"]+label::before {
  content: "";
  display: block;

  border: 1px solid;
  border-color:  #585753;
  background-color: #FFF;

  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -10px;

  width: 20px;
  height: 20px;

  box-sizing: border-box;
}
input[type=”checkbox”]+labelが「ラベル文字列を意味」し、::beforeで「ラベル文字列の左に表示するものを定義する」ことになる。
content 文字は表示しないので””にする。
display ブロック要素にする。
border、border-color、background-color □の形を定義する。
position、left、top、margin-top □の位置を調整する。
width、height □の大きさを調整する。
box-sizing paddingとborderを幅と高さに含める。

チェックボックスがオンになったときの定義

チェックボックスがオンになったときの「レ」マークを定義する。

/* チェックが入った時のレ点 */
.decoration-cb-sample input[type="checkbox"]:checked+label::after {
  content: "";

  width: 18px;
  height: 9px;
  border-bottom: 3px solid;
  border-left: 3px solid;
  transform: rotate(-45deg);

  position: absolute;
  top: 50%;
  left: 3px;
  margin-top: -9px;

  box-sizing: border-box;
  display: block;
  border-color:  #555555;
}
input[type=”checkbox”]:checked+labelが「チェックが入った状態のときの、ラベル文字列」を意味し、これに::afterを付けることで「『チェックが入った状態のときの、ラベル文字列』の右に表示するものを定義する」になる。
content文字は表示しないので””にする。
width、height、border-bottom、border-leftレの元の形を定義する。
transform回転させてレらしくする。
position、top、left、margin-top位置を合わせる。
box-sizingpaddingとborderを幅と高さに含める。
border-color「レ」に着色する。

デモ

チェックボックスを表示するとこうなる。

おまけ

チェックボックスの□を〇にしたいとき、□やレに色を付けたいときはそれぞれ定義を追加する。

□を○にしたいとき

□を丸くしたいときは、角丸の定義↓を追加する。

.decoration-cb-sample input[type="checkbox"]+label::before {
    border-radius: 50%;
}

着色したいとき

□やレに色を付けたいときはそれぞれ定義を追加する。
□に色を付けたいときは、border-colorで枠の色を、background-colorで□の中の色を定義する。

.decoration-cb-sample input[type="checkbox"]+label::before {
  border-color: #ff0000;      /* 枠の色 */
  background-color: #ffff55;  /* 中の色 */
}

レに色を付けたいときは、border-colorで定義する。

.decoration-cb-sample input[type="checkbox"]:checked+label::after {
  border-color: #ff0000;
}
にほんブログ村 その他日記ブログへ