チェックボックスをスライドボタンにしよう！

多くのブラウザのチェックボックスは□に「レ」が入る形状になっている。スマートフォンの設定画面などで使われているチェックボックスは楕円形になっている。

↓こーゆーの

iOSのチェックボックス
Androidのチェックボックス
Androidのチェックボックス
iOSのチェックボックス

「ブラウザでもスマートフォンのチェックボックスの形状を表示できないだろうか？」とCSSを設定していったら、それっぽいのができたので記録しておく。

事前にやること

□を楕円形にすることは決まった。次は「レ」の代わりになる○の大きさ、楕円の高さや幅などを決めておく。

  • オンとオフの状態
    「楕円の中の○をオンとオフそれぞれの状態でどのように表示するか」を決める。
    今回はオンのときは〇を右に、オフのときは〇を左に表示することにする。
  • ○の大きさ
    「レ」の代わりになる○の大きさ（直径）は、ラベルの高さを目安にしておこう。18pxくらいがいい。
  • ○の中の文字
    Android版のOFF、ONの文字は入れない。

楕円の高さと幅
楕円の高さは○の大きさに合わせる。18pxより少し大きい22pxにしておく。
幅は○の大きさの2倍を目安にしよう。今回は55pxにする。

CSSの定義

CSSで設定する項目を元のチェックボックスを消す、ラベルと楕円の定義、ONの状態の定義、OFFの状態の定義、に分ける。

チェックボックスのHTMLは次の通りに定義する。

<div class="decoration-cb-oval">
  <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>

元のチェックボックスを消す

.decoration-cb-oval input[type="checkbox"] {
  display: none;
}

checkboxを非表示にする。

ラベルの定義

.decoration-cb-oval input[type="checkbox"]+label {
  display: inline-block;
  padding-left: 58px;
  padding-right: 15px;
  position: relative;
  cursor: pointer;
}

指定するプロパティは次のとおりである。

  • display
    幅や高さを変更できるインライン要素にする
  • padding-left
    楕円を描くための隙間を作る。ラベルとの隙間が空き過ぎないように加減する。
  • padding-right
    右の項目との隙間を作る。
  • position
    このラベルを楕円の親要素にする。
  • cursor
    このラベルにマウスポインタ―が乗ったときの形を指定する。

楕円の定義（と同時にOFFのときの定義）

.decoration-cb-oval input[type="checkbox"]+label::before {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  left: 0px;
  width: 55px;
  height: 24px;
  border-radius: 12px;
  background-color: #aaa;
  /* 必要があれば位置合わせ */
  /* top: 1px; */
}

指定するプロパティは次のとおりである。

  • content
    文字は表示しないのでカラにする。
  • display
    幅、高さ、余白（marginとpadding）を指定できるようにする。
  • position
    ラベルを基準にした絶対位置にする。
  • box-sizing
    幅と高さにpaddingとborderを含める。
  • left
    楕円の表示位置をラベルのpadding-leftで作った隙間に合わせる。
  • width,height
    楕円の幅と高さを指定する。
  • border-radius
    楕円のカーブの半径を指定する。
  • background-color
    楕円の中の色を指定する。
  • top
    楕円が縦方向にずれているときに調整する。

○の （と同時にOFFのときの定義） 定義

.decoration-cb-oval input[type="checkbox"]+label::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 20px;
  height:20px;
  border-radius: 10px;
  background-color:#ffffff;
  left:3px;
  top:2px;
}

OFFのときの○のプロパティは次のとおりである。

  • content
    文字は表示しないのでカラにする。
  • position
    ラベルを基準にした絶対位置にする。
  • box-sizing
    幅と高さにpaddingとborderを含める。
  • width,height,border-radius
    □を定義して角を丸めて○にする。
  • background-color
    背景色を決める。
  • left
    楕円の左に合わせる。
  • top
    〇は楕円の「上詰め」になるため下にずらす。

ONのときの楕円の定義

.decoration-cb-oval input[type="checkbox"]:checked+label::before {
  background-color: #ff00ff;
}

チェックボックスがONになったときの楕円は、背景色を変えるだけになる。

ONのときの○の定義

.decoration-cb-oval input[type="checkbox"]:checked+label::after {
  background-color:#ffffff;
  left:32px;
}

ONのときの○のプロパティは表示位置と表示色が異なる。

  • background-color
    ○の色を指定する。
  • left
    楕円の右に合わせる。

動かしてみる

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

表示はできているが、○が瞬間移動して色も瞬時に変わってしまう。そこで…

アニメーション表示を追加する

ここではtransitionで○の位置や背景の色をゆっくり変化させる。

transitionは指定したプロパティを指定した時間で変化させる。

○が動いているようにする

.decoration-cb input[type="checkbox"]+label::after {
  transition: left 0.5s;
}
.decoration-cb input[type="checkbox"]:checked+label::after {
  transition: left 0.5s;
}

transitionにleftプロパティを指定して0.5秒で変化するように指定する。これで○が瞬間移動しなくなる。

背景色をじんわりと変える

.decoration-cb input[type="checkbox"]+label::before {
  transition: background-color 0.5s ease-in;
}
.decoration-cb input[type="checkbox"]:checked+label::before {
  transition: background-color 0.5s ease-in;
}

transitionにbackground-colorプロパティを指定して0.5秒で変化するように指定する。また、ease-inは変化の開始を少し遅らせる。これで背景がじんわりと変化する。

アニメーションを入れたものを動かしてみる

transitionを追記すると、↓こうなる。

よさそうかな。

ソースコード

アニメーションするまでのCSSのソースコードは↓こうなる。良かったら使っておくれ。

.decoration-cb-oval input[type="checkbox"] {
  display: none;
}
.decoration-cb-oval input[type="checkbox"]+label {
  display: inline-block;
  padding-left: 58px;
  padding-right: 15px;
  position: relative;
  cursor: pointer;
}
.decoration-cb-oval input[type="checkbox"]+label::before {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  left:0px;
  width: 55px;
  height: 24px;
  border-radius: 12px;
  background-color: #aaa;
  transition: background-color 0.5s;
}
.decoration-cb-oval input[type="checkbox"]+label::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 20px;
  height:20px;
  border-radius: 10px;
  background-color:#ffffff;
  left:3px;
  top:2px;
  transition: left 0.5s;
}
.decoration-cb-oval input[type="checkbox"]:checked+label::before {
  background-color: #ff00ff;
  transition: background-color 0.5s;
}
.decoration-cb-oval input[type="checkbox"]:checked+label::after {
  background-color:#ffffff;
  left:32px;
  transition: left 0.5s;
}

コメント

タイトルとURLをコピーしました