簡介
網(wǎng)頁UI自定義組件第二講 自定義滑桿。網(wǎng)頁上常見的種種UI效果我們經(jīng)常感覺太漂亮了。接下來的幾天我們會一直來使用CSS3來制作一些常見的UI效果，來改變?yōu)g覽器默認UI效果。請大家持續(xù)關注。今天我們要分享的是關于瀏覽器的表單元素中最讓人頭疼的滑塊效果。同樣的會貼上視頻。
常見的網(wǎng)頁UI效果
案例效果
技巧說明
使用CSS3偽類：同樣的要取消掉瀏覽器的默認效果，使用-webkit-appearance: none來去掉，顯示滑塊的樣式使用偽類-webkit-slider-thumb來進行控制。詳細效果請參見視頻
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
}
div{
margin:100px auto;
width: 600px;
}
input[type="range"]{
width: 100%;
outline: none;
-webkit-appearance:none;
height: 2px;
background: deepskyblue;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
width: 20px;
height: 20px;
background: lightblue;
border-radius: 100%;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="100" value="0" step="1" />
</div>
</body>
</html>
