应用CSS来拓展提高Input Range的示例

日期:2020-10-19 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

甚么是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"); 尝试1下
提醒: 你一样能够根据表单的元素结合来浏览 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.   outlinenone/* 去掉默认设置蓝色边框 */  
  12. }   
  13.     
  14. input[type=range]::-ms-track {   
  15.   width: 100%;   
  16.   cursorpointer;   
  17.   backgroundtransparent/* 掩藏滑块,便于自定滑块款式 */  
  18.   border-colortransparent;   
  19.   colortransparent;   
  20. }  

大家建立了1个在全部访问器中不能见或无款式的range input。如今大家能够加上基础款式。
给滑块加上款式

那个被点一下或沿路轨拖拽的小组件叫作滑块。它能够像基本的HTML元素1样被加上款式。
 

CSS Code拷贝內容到剪贴板
  1. /* 设置WebKit访问器下range */  
  2. input[type=range]::-webkit-slider-thumb {   
  3.   -webkit-appearance: none;   
  4.   border1px solid #000000;   
  5.   height36px;   
  6.   width16px;   
  7.   border-radius: 3px;   
  8.   background#ffffff;   
  9.   cursorpointer;   
  10.   margin-top: -14px/* 在Chrome下你必须界定1个margin值, 但在Firefox和IE下,是全自动的 */  
  11.   box-shadow: 1px 1px 1px #0000000px 0px 1px #0d0d0d/* 为滑块提升1个炫酷的殊效 */  
  12. }   
  13.     
  14. /* Firefox下 */  
  15. input[type=range]::-moz-range-thumb {   
  16.   box-shadow: 1px 1px 1px #0000000px 0px 1px #0d0d0d;   
  17.   border1px solid #000000;   
  18.   height36px;   
  19.   width16px;   
  20.   border-radius: 3px;   
  21.   background#ffffff;   
  22.   cursorpointer;   
  23. }   
  24.     
  25. /* IE下 */  
  26. input[type=range]::-ms-thumb {   
  27.   box-shadow: 1px 1px 1px #0000000px 0px 1px #0d0d0d;   
  28.   border1px solid #000000;   
  29.   height36px;   
  30.   width16px;   
  31.   border-radius: 3px;   
  32.   background#ffffff;   
  33.   cursorpointer;   
  34. }  

请留意在这里大家反复了几遍编码,这是必须的由于你不可以用逗号隔开这1类挑选器。访问器要是不可以了解挑选器的1一部分就会总体抛下这个挑选器。
大家获得了下面的模样:

给路轨加上款式

滑块挪动的水平线叫做路轨。它还可以像基本的HTML元素1样被加上款式。
IE中的小提醒:IE10+中给range input加上款式的方式略有不一样。在IE里,你能够给上半一部分(滑块的右侧)地区和下半一部分(滑块的左侧)地区加上彻底不一样的款式。
另外一个必须留意的事儿是你应当关键关心路轨,它在客户和range开展互动时会产生更改。

 

CSS Code拷贝內容到剪贴板
  1. input[type=range]::-webkit-slider-runnable-track {   
  2.   width: 100%;   
  3.   height: 8.4px;   
  4.   cursorpointer;   
  5.   box-shadow: 1px 1px 1px #0000000px 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.   cursorpointer;   
  19.   box-shadow: 1px 1px 1px #0000000px 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.   cursorpointer;   
  29.   backgroundtransparent;   
  30.   border-colortransparent;   
  31.   border-width16px 0;   
  32.   colortransparent;   
  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 #0000000px 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 #0000000px 0px 1px #0d0d0d;   
  48. }   
  49. input[type=range]:focus::-ms-fill-upper {   
  50.   background#367ebd;   
  51. }  

上述编码让大家获得:

搭建1个详细的range input

如今早已搭建好了滑块和路轨,大家能够融合CSS来进行1个详细的range input。
跨访问器的range input详细CSS编码

跨访问器的range input详细CSS编码以下。

 

CSS Code拷贝內容到剪贴板
  1. input[type=range] {   
  2.   -webkit-appearance: none;   
  3.   margin18px 0;   
  4.   width: 100%;   
  5. }   
  6. input[type=range]:focus {   
  7.   outlinenone;   
  8. }   
  9. input[type=range]::-webkit-slider-runnable-track {   
  10.   width: 100%;   
  11.   height: 8.4px;   
  12.   cursorpointer;   
  13.   animate: 0.2s;   
  14.   box-shadow: 1px 1px 1px #0000000px 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 #0000000px 0px 1px #0d0d0d;   
  21.   border1px solid #000000;   
  22.   height36px;   
  23.   width16px;   
  24.   border-radius: 3px;   
  25.   background#ffffff;   
  26.   cursorpointer;   
  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.   cursorpointer;   
  37.   animate: 0.2s;   
  38.   box-shadow: 1px 1px 1px #0000000px 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 #0000000px 0px 1px #0d0d0d;   
  45.   border1px solid #000000;   
  46.   height36px;   
  47.   width16px;   
  48.   border-radius: 3px;   
  49.   background#ffffff;   
  50.   cursorpointer;   
  51. }   
  52. input[type=range]::-ms-track {   
  53.   width: 100%;   
  54.   height: 8.4px;   
  55.   cursorpointer;   
  56.   animate: 0.2s;   
  57.   backgroundtransparent;   
  58.   border-colortransparent;   
  59.   border-width16px 0;   
  60.   colortransparent;   
  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 #0000000px 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 #0000000px 0px 1px #0d0d0d;   
  73. }   
  74. input[type=range]::-ms-thumb {   
  75.   box-shadow: 1px 1px 1px #0000000px 0px 1px #0d0d0d;   
  76.   border1px solid #000000;   
  77.   height36px;   
  78.   width16px;   
  79.   border-radius: 3px;   
  80.   background#ffffff;   
  81.   cursorpointer;   
  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

加上这些款式后获得的键入框以下: