サイト制作に関するメモ書き

HOME > HTML・CSS > CSSでチェックボックスをiOSのスイッチの見た目にする

CSSでチェックボックスをiOSのスイッチの見た目にする

iOSのスイッチのような見た目をチェックボックスで作る機会があったので、実装方法をメモ。

サンプルコード

まずはHTMLです。
labelで見た目の実装をして、隣接セレクタでチェック時の切り替えを行うようにします。

<input type="checkbox" class="c-switch-check" id="check">
<label class="c-switch-label" for="check"></label>

checkboxは非表示にして、labelと擬似要素を使って見た目の設定をします。

.c-switch-check {
	display: none;
}
.c-switch-label {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 30px;
	border-radius: calc(30px / 2);
	background: #cccccc;
	transition: background 200ms;
}
.c-switch-label::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	display: block;
	width: calc(30px - 4px);
	height: calc(30px - 4px);
	border-radius: calc((30px - 4px) / 2);
	background: #ffffff;
	transform: translateX(0);
	transition: transform 200ms;
}
.c-switch-check:checked + .c-switch-label {
	background: #3dcc55;
}
.c-switch-check:checked + .c-switch-label::before {
	transform: translateX(calc((50px - 4px) - (30px - 4px)));
}

iOSのスイッチを実装するデモページ
calc()を使って各サイズや位置の設定を行なっているので、スイッチ自体のサイズを変更する場合は適宜調整してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP