使用CSS来扩展增强Input Range的示例

使用CSS来扩展增强Input Range的示例

什么是Input Range

Input Range 对象是 HTML5 新增的。

Input Range 对象表示使用 type="range" 属性的 HTML <input> 元素。

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

.

访问 Input Range 对象

你可以使用 getElementById() 函数来访问使用 type="range" 属性的 <input> 元素:

var x = document.getElementById("myRange"); 尝试一下
提示： 你同样可以通过表单的元素集合来访问 Input Range 对象。

创建 Input Range 对象

你可以使用 document.createElement() 方法来创建使用 type="range" 属性的 <input> 元素：

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

在这篇教程中，我们用基本的range input作为例子：

然后把它变成：

为了简化生成跨浏览器兼容的样式的过程，我们引进LESS。

当然也有CSS版本。

添加基础CSS样式

我们需要给range input添加几个样式来覆盖所有浏览器的默认外观。

 

CSS Code复制内容到剪贴板

1. input[type=range] {   
2.   -webkit-appearance: none; /* 隐藏滑块，以便自定义滑块样式 */  
3.   width: 100%; /* Firefox下所需 */  
4. }   
5.     
6. input[type=range]::-webkit-slider-thumb {   
7.   -webkit-appearance: none;   
8. }   
9.     
10. input[type=range]:focus {   
11.   outline: none; /* 去掉默认蓝色边框 */  
12. }   
13.     
14. input[type=range]::-ms-track {   
15.   width: 100%;   
16.   cursor: pointer;   
17.   background: transparent; /* 隐藏滑块，以便自定义滑块样式 */  
18.   border-color: transparent;   
19.   color: transparent;   
20. }  

我们创建了一个在所有浏览器中不可见或无样式的range input。

现在我们可以添加基本样式。

给滑块添加样式

那个被点击或者沿轨道拖动的小组件叫作滑块。

它可以像常规的HTML元素一样被添加样式。

 

CSS Code复制内容到剪贴板

1. /* 设定WebKit浏览器下range */  
2. input[type=range]::-webkit-slider-thumb {   
3.   -webkit-appearance: none;   
4.   border: 1px solid #000000;   
5.   height: 36px;   
6.   width: 16px;   
7.   border-radius: 3px;   
8.   background: #ffffff;   
9.   cursor: pointer;   
10.   margin-top: -14px; /* 在Chrome下你需要定义一个margin值, 但在Firefox和IE下，是自动的 */  
11.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* 为滑块增加一个酷炫的特效 */  
12. }   
13.     
14. /* Firefox下 */  
15. input[type=range]::-moz-range-thumb {   
16.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
17.   border: 1px solid #000000;   
18.   height: 36px;   
19.   width: 16px;   
20.   border-radius: 3px;   
21.   background: #ffffff;   
22.   cursor: pointer;   
23. }   
24.     
25. /* IE下 */  
26. input[type=range]::-ms-thumb {   
27.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
28.   border: 1px solid #000000;   
29.   height: 36px;   
30.   width: 16px;   
31.   border-radius: 3px;   
32.   background: #ffffff;   
33.   cursor: pointer;   
34. }  

请注意在这里我们重复了几遍代码，这是有必要的因为你不能用逗号分隔这一类选择器。

浏览器只要不能理解选择器的一部分就会整体抛弃这个选择器。

我们得到了下面的样子：

给轨道添加样式

滑块移动的水平线叫做轨道。

它也可以像常规的HTML元素一样被添加样式。

IE中的小提示：IE10+中给range input添加样式的方法略有不同。

在IE里，你可以给上半部分（滑块的右边）区域和下半部分（滑块的左边）区域添加完全不同的样式。

另一个需要注意的事情是你应该重点关注轨道，它在用户和range进行交互时会发生改变。

 

CSS Code复制内容到剪贴板

1. input[type=range]::-webkit-slider-runnable-track {   
2.   width: 100%;   
3.   height: 8.4px;   
4.   cursor: pointer;   
5.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
6.   background: #3071a9;   
7.   border-radius: 1.3px;   
8.   border: 0.2px solid #010101;   
9. }   
10.     
11. input[type=range]:focus::-webkit-slider-runnable-track {   
12.   background: #367ebd;   
13. }   
14.     
15. input[type=range]::-moz-range-track {   
16.   width: 100%;   
17.   height: 8.4px;   
18.   cursor: pointer;   
19.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
20.   background: #3071a9;   
21.   border-radius: 1.3px;   
22.   border: 0.2px solid #010101;   
23. }   
24.     
25. input[type=range]::-ms-track {   
26.   width: 100%;   
27.   height: 8.4px;   
28.   cursor: pointer;   
29.   background: transparent;   
30.   border-color: transparent;   
31.   border-width: 16px 0;   
32.   color: transparent;   
33. }   
34. input[type=range]::-ms-fill-lower {   
35.   background: #2a6495;   
36.   border: 0.2px solid #010101;   
37.   border-radius: 2.6px;   
38.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
39. }   
40. input[type=range]:focus::-ms-fill-lower {   
41.   background: #3071a9;   
42. }   
43. input[type=range]::-ms-fill-upper {   
44.   background: #3071a9;   
45.   border: 0.2px solid #010101;   
46.   border-radius: 2.6px;   
47.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
48. }   
49. input[type=range]:focus::-ms-fill-upper {   
50.   background: #367ebd;   
51. }  

上述代码让我们得到：

构建一个完整的range input

现在已经构建好了滑块和轨道，我们可以结合CSS来完成一个完整的range input。

跨浏览器的range input完整CSS代码

跨浏览器的range input完整CSS代码如下。

 

CSS Code复制内容到剪贴板

1. input[type=range] {   
2.   -webkit-appearance: none;   
3.   margin: 18px 0;   
4.   width: 100%;   
5. }   
6. input[type=range]:focus {   
7.   outline: none;   
8. }   
9. input[type=range]::-webkit-slider-runnable-track {   
10.   width: 100%;   
11.   height: 8.4px;   
12.   cursor: pointer;   
13.   animate: 0.2s;   
14.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
15.   background: #3071a9;   
16.   border-radius: 1.3px;   
17.   border: 0.2px solid #010101;   
18. }   
19. input[type=range]::-webkit-slider-thumb {   
20.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
21.   border: 1px solid #000000;   
22.   height: 36px;   
23.   width: 16px;   
24.   border-radius: 3px;   
25.   background: #ffffff;   
26.   cursor: pointer;   
27.   -webkit-appearance: none;   
28.   margin-top: -14px;   
29. }   
30. input[type=range]:focus::-webkit-slider-runnable-track {   
31.   background: #367ebd;   
32. }   
33. input[type=range]::-moz-range-track {   
34.   width: 100%;   
35.   height: 8.4px;   
36.   cursor: pointer;   
37.   animate: 0.2s;   
38.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
39.   background: #3071a9;   
40.   border-radius: 1.3px;   
41.   border: 0.2px solid #010101;   
42. }   
43. input[type=range]::-moz-range-thumb {   
44.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
45.   border: 1px solid #000000;   
46.   height: 36px;   
47.   width: 16px;   
48.   border-radius: 3px;   
49.   background: #ffffff;   
50.   cursor: pointer;   
51. }   
52. input[type=range]::-ms-track {   
53.   width: 100%;   
54.   height: 8.4px;   
55.   cursor: pointer;   
56.   animate: 0.2s;   
57.   background: transparent;   
58.   border-color: transparent;   
59.   border-width: 16px 0;   
60.   color: transparent;   
61. }   
62. input[type=range]::-ms-fill-lower {   
63.   background: #2a6495;   
64.   border: 0.2px solid #010101;   
65.   border-radius: 2.6px;   
66.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
67. }   
68. input[type=range]::-ms-fill-upper {   
69.   background: #3071a9;   
70.   border: 0.2px solid #010101;   
71.   border-radius: 2.6px;   
72.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
73. }   
74. input[type=range]::-ms-thumb {   
75.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
76.   border: 1px solid #000000;   
77.   height: 36px;   
78.   width: 16px;   
79.   border-radius: 3px;   
80.   background: #ffffff;   
81.   cursor: pointer;   
82. }   
83. input[type=range]:focus::-ms-fill-lower {   
84.   background: #3071a9;   
85. }   
86. input[type=range]:focus::-ms-fill-upper {   
87.   background: #367ebd;   
88. }  

完成的range input

添加这些样式后得到的输入框如下：