Googleっぽいオンオフ切り替えボタンが作りたくなったので、自分で実装してみました。コードも含めて紹介していきます。
ざっくり方針
- inputのcheckboxタイプを使って実装します。CSSクラスの切り替えで操作することもできますが、Boolean(true/false)を取得したかったので、checkboxを選択しました。
- checkboxはボックスを変形できないため、checkboxに付随するlabelとその疑似要素でボタンを作ります。
HTML要素を作る
注意ポイントは、inputにはidを設定して、対応するlabelにhtmlForを設定しておくことです。こうすることで、labelがクリックされた場合でも、inputにチェックが入るようになります。
<input
type="checkbox"
id="check1"
// defaultCheckedを使用する場合はここで設定します。
/>
<label htmlFor="check1"}>チェック1</label>
<input
type="checkbox"
id="check2"
/>
<label htmlFor="check2"}>チェック1</label>
後は、CSSの実装!(Sassの記法になってます)
コピペOKです!Sassの記法になっているので、ご注意ください。
input[type="checkbox"] {
display: none; // 元々のcheckboxは消しておきます。
& + label { //「+」は、その要素の隣を意味するので、inputの横にあるlabelを指定してます。
position: relative;
vertical-align: middle;
cursor: pointer;
// スライドボタンの背景
&::before {
content: "";
position: absolute;
display: block;
top: 50%;
right: -40px;
transform: translateY(-50%);
border-radius: 10px;
width: 28px;
height: 12px;
background-color: gray;
}
// スライドボタンの丸部分
&::after {
content: "";
position: absolute;
display: block;
top: 50%;
right: -27px;
transform: translateY(-50%);
height: 16px;
width: 16px;
border-radius: 50%;
background-color: white;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
transition: transform 0.2s ease; // transitionでゆっくりボタンが動くようにしてます。
}
// チェックされたとき
&:checked + label {
&::before {
background-color: blue;
}
&::after {
transform: translate(15px, -50%);
}
}
}
以上です!
カラーを変えると雰囲気が変わるので、ぜひやってみてください。
labelを押しても、ボタンを押してもちゃんとチェックが入るはずです。いろんな場面で使ってみてください。