Google Chrome拡張機能のオプションページで使うためのOn / OffボタンをHTMLとCSS3でカキカキ。

See the Pen TOGGLE SWITCH on CSS3 1

経緯的な

こういうのはサンプルも多い。ただラジオボタンで切り替えてるものも多い。 ラジオボタンでつくるとOnとOffでラベルが異なるため、Offにする時はOffの側をクリックしないと反応しない。On側をクリックしてもOnのラベルがクリックされるのでOnのままなのです。 広いブラウザで対応することを考えるとそれがベスト。でもブラウザの拡張機能ならクロスブラウザは考えなくていいよねってことでつくりました。 現実的にみれば、OnをつまんでOff側にスライドさせるって動作もいれるべきなんだけど、そこまでの処理はいらんかなと。

ソースコード

HTML

HTMLコードは至ってシンプル。チェックボックスとラベルのみ。


CSS

CSSでチェックボックスを非表示にして擬似要素beforeで”Off”、afterで”On”を描画しています。 それをCSS3の擬似要素[:checked]で色を変える。
.onoff {
	display: none;
}
.onoff + label {
}
.onoff + label:before,
.onoff + label:after {
  display: inline-block;
  padding: .2em .5em;
  width: 2em;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}
.onoff + label:before {
  content: "OFF";
  background: #DEDEDE;
  color: #000000;
  border-top-left-radius: .3em;
  border-bottom-left-radius: .3em;
}
.onoff + label:after {
  content: "ON";
  background: #ABABAB;
  color: #ABABAB;
  border-top-right-radius: .3em;
  border-bottom-right-radius: .3em;
}
.onoff:checked + label:before {
  background: #459ACA;
  color: #459ACA;
}
.onoff:checked + label:after {
  background: #73CAFF;
  color: #FFFFFF;
}