脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

WEB前端开发   发布时间：2015-08-04 16:10:30   作者：佚名   我要评论
这篇文章主要介绍了使用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作为例子：
201584155821184.png (362×114)

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

为了简化生成跨浏览器兼容的样式的过程，我们引进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. }  

请注意在这里我们重复了几遍代码，这是有必要的因为你不能用逗号分隔这一类选择器。浏览器只要不能理解选择器的一部分就会整体抛弃这个选择器。
我们得到了下面的样子：
201584155908494.png (898×144)

给轨道添加样式

滑块移动的水平线叫做轨道。它也可以像常规的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. }  

上述代码让我们得到：
201584155952217.png (836×128)

构建一个完整的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

添加这些样式后得到的输入框如下：
201584160016061.png (748×134)

相关文章

  • 前端CSS Grid 布局示例详解

    CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,这篇文章主要介绍了前端CSS Grid 布局详解,需要的朋
    2025-04-16

  • CSS Padding 和 Margin 区别全解析

    CSS 中的 padding 和 margin 是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍 padding 和 margin 的概念、区别以及如何在实际项目中使用它们
    2025-04-07

  • CSS will-change 属性示例详解

    will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSS will-change 属性详解，感兴趣的朋友一起看看吧
    2025-04-07

  • CSS去除a标签的下划线的几种方法

    本文给大家分享在 CSS 中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2025-04-07

  • 前端高级CSS用法示例详解

    在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将
    2025-04-07

  • css中的 vertical-align与line-height作用详解

    文章详细介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，感兴趣的朋友跟随小编一起看看吧
    2025-03-26

  • 浅析CSS 中z - index属性的作用及在什么情况下会失效

    z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fixed或sticky），本文给大家介绍CSS 中z - index属性的作用
    2025-03-21

  • CSS @media print 使用详解

    文章详细介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等
    2025-03-18

  • CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

    本文介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示，感兴趣的朋友一起
    2025-03-10

  • 前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

    本文介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式；通过数组语法,可以同时绑定多个类名或样式,此外
    2025-02-26

最新评论

关注微信公众号

扫一扫