使用CSS來擴(kuò)展增強(qiáng)Input Range的示例

WEB前端開發(fā) 發(fā)布時(shí)間：2015-08-04 16:10:30 作者：佚名

我要評(píng)論

這篇文章主要介紹了使用CSS來擴(kuò)展增強(qiáng)Input Range的示例,文中示例是一個(gè)跨瀏覽器的軌道滑動(dòng)樣式,需要的朋友可以參考下

什么是Input Range

Input Range 對(duì)象是 HTML5 新增的。
Input Range 對(duì)象表示使用 type="range" 屬性的 HTML <input> 元素。

注意： Internet Explorer 9及更早IE版本不支持使用 type="range" 屬性的 HTML <input> 元素。.

訪問 Input Range 對(duì)象

你可以使用 getElementById() 函數(shù)來訪問使用 type="range" 屬性的 <input> 元素:

var x = document.getElementById("myRange"); 嘗試一下
提示：你同樣可以通過表單的元素集合來訪問 Input Range 對(duì)象。

創(chuàng)建 Input Range 對(duì)象

你可以使用 document.createElement() 方法來創(chuàng)建使用 type="range" 屬性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "range");

在這篇教程中，我們用基本的range input作為例子：
201584155821184.png (362×114)

然后把它變成：
201584155844838.png (748×134)

為了簡化生成跨瀏覽器兼容的樣式的過程，我們引進(jìn)LESS。當(dāng)然也有CSS版本。
添加基礎(chǔ)CSS樣式

我們需要給range input添加幾個(gè)樣式來覆蓋所有瀏覽器的默認(rèn)外觀。

CSS Code復(fù)制內(nèi)容到剪貼板

input[type=range] {
-webkit-appearance: none; /* 隱藏滑塊，以便自定義滑塊樣式 */
width: 100%; /* Firefox下所需 */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* 去掉默認(rèn)藍(lán)色邊框 */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent; /* 隱藏滑塊，以便自定義滑塊樣式 */
border-color: transparent;
color: transparent;
}

我們創(chuàng)建了一個(gè)在所有瀏覽器中不可見或無樣式的range input?，F(xiàn)在我們可以添加基本樣式。
給滑塊添加樣式

那個(gè)被點(diǎn)擊或者沿軌道拖動(dòng)的小組件叫作滑塊。它可以像常規(guī)的HTML元素一樣被添加樣式。

CSS Code復(fù)制內(nèi)容到剪貼板

/* 設(shè)定WebKit瀏覽器下range */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px; /* 在Chrome下你需要定義一個(gè)margin值, 但在Firefox和IE下，是自動(dòng)的 */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* 為滑塊增加一個(gè)酷炫的特效 */
}
/* Firefox下 */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* IE下 */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}

請(qǐng)注意在這里我們重復(fù)了幾遍代碼，這是有必要的因?yàn)槟悴荒苡枚禾?hào)分隔這一類選擇器。瀏覽器只要不能理解選擇器的一部分就會(huì)整體拋棄這個(gè)選擇器。
我們得到了下面的樣子：
201584155908494.png (898×144)

給軌道添加樣式

滑塊移動(dòng)的水平線叫做軌道。它也可以像常規(guī)的HTML元素一樣被添加樣式。
IE中的小提示：IE10+中給range input添加樣式的方法略有不同。在IE里，你可以給上半部分（滑塊的右邊）區(qū)域和下半部分（滑塊的左邊）區(qū)域添加完全不同的樣式。
另一個(gè)需要注意的事情是你應(yīng)該重點(diǎn)關(guān)注軌道，它在用戶和range進(jìn)行交互時(shí)會(huì)發(fā)生改變。

CSS Code復(fù)制內(nèi)容到剪貼板