HTMLとCSSでシンプルなトグルスイッチを作ります。
デモ
解説
HTML
HTMLはシンプルにいきます。セマンティックなHTMLを心がけます。
<label><input type=checkbox>Click Me</label>
楕円部？が<input>本体、中の●が<input>の::before (pseudo-element)です。
普通のチェックボックスも使う場合は<input>はclass=toggleなどにします。
CSS
次にCSSです。
/* おまじない */
* {
box-sizing: border-box;
}
body {
color: #0c0c0d; /* 黒 */
font-size: 16px;
line-height: 1.4;
}
/* ここから本文 */
/** ここは下とまとめても問題ないですが、基本的にはページ内でinputのデザインは揃えたほういいと思います */
input {
border: 1px solid #0c0c0d4d;
color: #737373; /* グレー */
display: inline-block;
margin: 0 4px;
}
/* 楕円部 */
input[type="checkbox"] {
-webkit-appearance: none; /* 消してもOK */
appearance: none; /* 元々あるチェックボックスを非表示にする */
background-color: #0c0c0d1a; /* 楕円の色=文字色alpha10% */
border-radius: 8px; /* heightの半分 */
height: 16px;
width: 32px; /* heightの2倍くらい */
}
input[type="checkbox"]:hover {
background-color: #0c0c0d33;
border-color: #0c0c0d7f;
}
input[type="checkbox"]:active {
background-color: #0c0c0d4d;
}
input[type="checkbox"]:focus {
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px #0a84ff4d;
}
input[type="checkbox"]:checked {
background-color: #0060df; /* 青 */
border-color: #0060df;
}
/* 中の● */
input[type="checkbox"]::before {
background-color: currentColor; /* ●の色=グレー */
border-radius: 6px; /* heightの半分 */
content: ""; /* おまじない */
display: inline-block; /* おまじない */
height: 12px; /* 楕円部のheightより2px小さいくらい */
margin-left: 1px; /* オフ時の●の位置 */
transition: margin-left .2s cubic-bezier(.07, .95, 0, 1); /* ヌルっと具合は調整 */
width: 12px; /* heightに合わせる */
}
input[type="checkbox"]:checked::before {
background-color: #ffffff; /* 白（楕円部の色と調整） */
margin-left: 17px; /* 右へ移動 */
}
サイズはpx単位で合わせていますが、状況に応じてem単位にしてもいいと思います。
ただしユーザーエージェントに依りますが<input>では1emが周りより小さくなるので、別途font-sizeを指定する必要があります。（もしくはremを使う）
最後のmargin-leftは
楕円のwidth32px − 左右border2px − 始めのmargin-left1px − ●のwidth12px = 17px
にしています。box-sizingや各サイズを変更した場合は調整します。
コピペされる方は色その他装飾は適宜変更してください。（変数にして:rootで定義するなど）
まとめ
シンプルイズベスト
↧