preview
checkbox4
description
1.可自定義：
按鈕大小 : checkboxSize，支持 em, vw, px
寬高比 : checkboxWidthTimes
動畫時長 : switchingTimeCost
間隙大小 : interspace
邊框大小 : checkboxBorderSize
主題顏色 : checkboxColorForOFF / checkboxColorForON
2.這個按鈕樣式與 checkbox2 類似募判。
scss
/* html
<div class="checkboxWrapper">
<input type="checkbox" value="" id="slideID" name="slide" checked>
<label for="slideID"></label>
</div>
*/
* { padding: 0; margin: 0; box-sizing: border-box; }
*::after{ box-sizing: border-box; }
$checkboxSize: 20px;
$checkboxWidthTimes: 2.5;
$switcherWidthTimes: 1.3; /* 可以是橢圓形的內部按鈕，可自行設置寬高比 */
$checkboxWidth: $checkboxWidthTimes * $checkboxSize;
$switcherWidth: $checkboxSize * $switcherWidthTimes;
$checkboxColorForOFF: #f2f2f2;
$checkboxColorForON: #7FC6A6;
$interspace: 3px; /* 按鈕與背景邊框間隙大小 */
$checkboxBorderSize: 4px;
$switchingTimeCost: 0.2s;
.checkboxWrapper {
width: $checkboxWidth;
height: $checkboxSize;
position: relative;
& label {
display: block;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
width: $checkboxWidth + 2 * $interspace;
height: $checkboxSize + 2 * $interspace;
box-sizing: content-box;
border-radius: $checkboxWidth;
transition: all $switchingTimeCost ease;
overflow: hidden;
border: $checkboxBorderSize solid $checkboxColorForOFF;
&::after {
content: "";
width: $switcherWidth;
height: $checkboxSize;
background-color: $checkboxColorForOFF;
transition: left $switchingTimeCost ease;
border-radius: 2 * $switcherWidth;
position: absolute;
top: $interspace;
left: $interspace;
}
}
& input:checked + label{
border-color: $checkboxColorForON;
&::after{
left: $checkboxWidth - $switcherWidth + $interspace;
background-color: $checkboxColorForON;
}
}
& input {
display: none;
}
}
