层级清晰、不依赖 JavaScript 的 Switch、Checkbox、Radio 三个 Input UI。
.hs-switch__wrapper
.hs-switch
.hs-switch__input
.hs-switch__toggle
.hs-switch__animating
<label class="hs-switch__wrapper">
<div class="hs-switch animate">
<input class="hs-switch__input" type="checkbox" />
<i class="hs-switch__toggle"></i>
<span class="hs-switch__animating"></span>
</div>
</label>
.hs-checkbox__wrapper
.hs-checkbox
.hs-checkbox__input
.hs-checkbox__toggle
<label class="hs-checkbox__wrapper">
<div class="hs-checkbox">
<input class="hs-checkbox__input" type="checkbox" />
<i class="hs-checkbox__toggle"></i>
</div>
span
</label>
.hs-radio__wrapper
.hs-radio
.hs-radio__input
.hs-radio__toggle
<label class="hs-radio__wrapper">
<div class="hs-radio animate">
<input class="hs-radio__input" type="radio" name="group" />
<i class="hs-radio__toggle"></i>
</div>
</label>
-
使用
input[checked|disabled]
生效交互<input class="hs-checkbox__input" type="checkbox" checked disabled />
-
在
hs-switch
/hs-checkbox
/hs-radio
层设置字体大小 (font-size) 可调整尺寸
::after, ::before
Pseudo-elements:checked, :disabled, :not()
Pseudo-classesselector+selector
selector~selector
selector:not()
transform
transition
animation
border-radius
box-sizing