如何使用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這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！