如何使用CSS来扩展增强Input Range

这篇文章主要讲解了“如何使用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

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

感谢各位的阅读，以上就是“如何使用CSS来扩展增强Input Range”的内容了，经过本文的学习后，相信大家对如何使用CSS来扩展增强Input Range这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！