純css實現仿ios的switch開關
阿新 • • 發佈:2019-01-03
效果圖如下:
很簡單的HTML結構
<!-- 仿ios的switch開關 -->
<label for=""><input type="checkbox" name="" id="" class="a-switch"></label>
CSS部分:
主要用到了:
點選label會觸發點選所包含的input控制元件,利用處理label的樣式來實現
<style>
.a-switch{
width: 60px;
height: 30px;
border-radius : 20px;
-webkit-appearance: none;
user-select: none;
outline: none;
background-color: #e0e0e0;
box-shadow: #c2c2c2 0 0 0 0 inset;
position: relative;
transition:0.4s;
}
.a-switch:before{
content: '' ;
width: 28px;
height: 28px;
border-radius: 100%;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
position: absolute;
left:0;
top:1px;
transition:0.3s;
}
.a-switch:checked {
border-color: #81d480;
box-shadow: #83e482 0 0 0 14px inset;
background-color: #81d480;
}
.a-switch:checked:before{
left:32px;
}
</style>