設定画面などで活用できるON/OFF切り替えスイッチ風チェックボックスの作り方を解説します。
①標準のチェックボックスを消し、背景を入れる
<div class="switch-checkbox">
<input type="checkbox" checked id="sw-1">
<label for="sw-1">スイッチ風..</label>
</div>
.switch-checkbox input[type=checkbox] {
width: 65px; height: 30px;
border-radius: 5px;
background-color: #333;
appearance: none; /* 標準チェックを非表示 */
...
}「appearance: none;」で標準のチェックボックスを消し「background-color」で背景を黒にします。
②before疑似要素でスイッチ風に装飾
.switch-checkbox input[type=checkbox]::before {
position: absolute;
top: 50%;
left: 1.6rem;
transform: translateY(-50%);
width: 40px;
background-color: #B75454;
content: 'OFF';
}
before疑似要素で位置を調整し、幅40pxのOFFスイッチを作成します。
③チェック時に左に移動し「ON」状態にする
.switch-checkbox input[type=checkbox]:checked::before {
background-color: #6CD892;
left: 0.2rem;
content: 'ON';
}「:checked」擬似クラスを使用し「left」プロパティで左に寄せ、「background-color」と「content」を変更して「ON」スイッチを設定し完成。
全てのソース
コードを表示
<div class="switch-checkbox">
<input type="checkbox" checked="" id="switch-check-1">
<label for="switch-check-1">スイッチ風チェックボックス</label>
</div>.switch-checkbox {
margin-bottom: 1rem;
}
.switch-checkbox input[type=checkbox] {
position: relative;
cursor: pointer;
width: 4.5rem;
height: 1.9rem;
margin-top: -0.2rem;
border-radius: 5px;
background-color: #333;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
transition: .5s;
}
.switch-checkbox input[type=checkbox]::before {
position: absolute;
top: 50%;
left: 1.6rem;
transform: translateY(-50%);
width: 2.6rem;
padding: 0.2rem 0rem;
background-color: #B75454;
text-align: center;
content: 'OFF';
transition: .5s;
}
.switch-checkbox input[type=checkbox]:checked::before {
background-color: #6CD892;
left: .2rem;
content: 'ON';
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
