之前在項目中使用滑塊開關按鈕，純css寫的，不考慮兼容低版本瀏覽器，先說下原理：
使用 checkbox 的 選中 checked 屬性改變css 偽類樣式， 一定要使用-webkit-appearance: none; 先清除checkbox的默認樣式 ，否則寫其他的樣式不起作用；
好，不多說，直接上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css滑塊開關</title>
<style>
.checke{
position: relative;
-webkit-appearance: none;
width:90px;
height: 44px;
line-height: 44px;
background: #eee;
border-radius: 30px;
outline: none;
}
.checke:before{
position: absolute;
left: 0;
content: '';
width: 44px;
height: 44px;
border-radius: 50%;
background: #eee;
box-shadow: 0px 0px 5px #ddd;
transition: all 0.2s linear;
}
.checke:checked{
background: #18ff0a;
}
.checke:checked:before{
left: 45px;
transition: all 0.2s linear;
}
</style>
</head>
<body>
<input type="checkbox" class="checke">
</body>
</html>
一個干凈整潔的按鈕代碼就產生了！如果需要根據按鈕樣式，決定某個數據值，就要寫在js中判斷 checkbox 是否選擇就ok了，簡單易用！