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

ブラウザのチェックボックスをスライドボタンにしよう!

CSSでブラウザのチェックボックスをスマートフォンのチェックボックスみたいな楕円のスライドボタンにしてみた記録


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

↓こーゆーの

Androidのチェックボックス
Androidのチェックボックス
iOSのチェックボックス
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;
}

ラベルの定義

楕円チェックボックスのラベルを定義する。

.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;
}

ONになるときとOFFになるときのそれぞれの動きを制御する。、transitionに「left 0.5」と指定すると、「表示位置を指定する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;
}
にほんブログ村 その他日記ブログへ