簡介
網頁UI自定義組件第四講 自定義表單開關按鈕。網頁上常見的種種UI效果我們經常感覺太漂亮了。接下來的幾天我們會一直來使用CSS3來制作一些常見的UI效果，來改變瀏覽器默認UI效果。請大家持續關注。今天我們要分享的是關于瀏覽器的表單元素中最讓人頭疼的自定義表單開關按鈕。同樣的會貼上視頻。
常見的網頁UI效果
1481533413787524.png
1481533387423174.png
案例效果
1481533424450026.png
技巧說明
使用CSS3偽類：checked :before 來進行制作，同樣的要取消掉瀏覽器的默認效果，使用-webkit-appearance: none來去掉，以及及box-shadow屬性及transition過渡和transform轉換。詳細效果請參見視頻：
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
}
div{
width: 60px;
margin: 100px auto;
}
input[type="checkbox"]{
-webkit-appearance: none;
width: 60px;
height: 28px;
background: #efefef;
border-radius: 28px;
box-shadow: 0px 2px 2px rgba(0,0,0,.3) inset;
outline: none;
transition: all 0.3s;
}
input[type="checkbox"]:checked{
background: rgba(146, 214, 255, 0.91);
}
input[type="checkbox"]:before{
width: 24px;
height: 24px;
background: #999;
content: " ";
display: block;
border-radius: 100%;
position: relative;
left: 2px;
top: 2px;
transform: translateX(32px);
transition: all 0.3s;
}
input[type="checkbox"]:checked:before{
background: #1E90FF;
transform: translateX(0px);
}
</style>
</head>
<body>
<div>
<input type="checkbox" />
</div><div>
<input type="checkbox" />
</div><div>
<input type="checkbox" />
</div>
</body>
</html>
