簡介
網(wǎng)頁UI自定義組件第二講 自定義滑桿咖摹。網(wǎng)頁上常見的種種UI效果我們經(jīng)常感覺太漂亮了这橙。接下來的幾天我們會一直來使用CSS3來制作一些常見的UI效果你稚，來改變?yōu)g覽器默認(rèn)UI效果金顿。請大家持續(xù)關(guān)注圆到。今天我們要分享的是關(guān)于瀏覽器的表單元素中最讓人頭疼的滑塊效果。同樣的會貼上視頻蚯嫌。
常見的網(wǎng)頁UI效果
案例效果
技巧說明
使用CSS3偽類：同樣的要取消掉瀏覽器的默認(rèn)效果哲虾，使用-webkit-appearance: none來去掉，顯示滑塊的樣式使用偽類-webkit-slider-thumb來進(jìn)行控制择示。詳細(xì)效果請參見視頻
代碼：
<!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>
