使用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添加几个样式来覆盖所有浏览器的默认外观。
- input[type=range] {
- -webkit-appearance: none; /* 隐藏滑块,以便自定义滑块样式 */
- width: 100%; /* Firefox下所需 */
- }
- input[type=range]::-webkit-slider-thumb {
- -webkit-appearance: none;
- }
- input[type=range]:focus {
- outline: none; /* 去掉默认蓝色边框 */
- }
- input[type=range]::-ms-track {
- width: 100%;
- cursor: pointer;
- background: transparent; /* 隐藏滑块,以便自定义滑块样式 */
- border-color: transparent;
- color: transparent;
- }
我们创建了一个在所有浏览器中不可见或无样式的range input。现在我们可以添加基本样式。
给滑块添加样式
那个被点击或者沿轨道拖动的小组件叫作滑块。它可以像常规的HTML元素一样被添加样式。
- /* 设定WebKit浏览器下range */
- input[type=range]::-webkit-slider-thumb {
- -webkit-appearance: none;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
- cursor: pointer;
- margin-top: -14px; /* 在Chrome下你需要定义一个margin值, 但在Firefox和IE下,是自动的 */
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* 为滑块增加一个酷炫的特效 */
- }
- /* Firefox下 */
- input[type=range]::-moz-range-thumb {
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
- cursor: pointer;
- }
- /* IE下 */
- input[type=range]::-ms-thumb {
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
- cursor: pointer;
- }
请注意在这里我们重复了几遍代码,这是有必要的因为你不能用逗号分隔这一类选择器。浏览器只要不能理解选择器的一部分就会整体抛弃这个选择器。
我们得到了下面的样子:
给轨道添加样式
滑块移动的水平线叫做轨道。它也可以像常规的HTML元素一样被添加样式。
IE中的小提示:IE10+中给range input添加样式的方法略有不同。在IE里,你可以给上半部分(滑块的右边)区域和下半部分(滑块的左边)区域添加完全不同的样式。
另一个需要注意的事情是你应该重点关注轨道,它在用户和range进行交互时会发生改变。
- input[type=range]::-webkit-slider-runnable-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- background: #3071a9;
- border-radius: 1.3px;
- border: 0.2px solid #010101;
- }
- input[type=range]:focus::-webkit-slider-runnable-track {
- background: #367ebd;
- }
- input[type=range]::-moz-range-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- background: #3071a9;
- border-radius: 1.3px;
- border: 0.2px solid #010101;
- }
- input[type=range]::-ms-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- background: transparent;
- border-color: transparent;
- border-width: 16px 0;
- color: transparent;
- }
- input[type=range]::-ms-fill-lower {
- background: #2a6495;
- border: 0.2px solid #010101;
- border-radius: 2.6px;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- }
- input[type=range]:focus::-ms-fill-lower {
- background: #3071a9;
- }
- input[type=range]::-ms-fill-upper {
- background: #3071a9;
- border: 0.2px solid #010101;
- border-radius: 2.6px;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- }
- input[type=range]:focus::-ms-fill-upper {
- background: #367ebd;
- }
上述代码让我们得到:
构建一个完整的range input
现在已经构建好了滑块和轨道,我们可以结合CSS来完成一个完整的range input。
跨浏览器的range input完整CSS代码
跨浏览器的range input完整CSS代码如下。
- input[type=range] {
- -webkit-appearance: none;
- margin: 18px 0;
- width: 100%;
- }
- input[type=range]:focus {
- outline: none;
- }
- input[type=range]::-webkit-slider-runnable-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- animate: 0.2s;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- background: #3071a9;
- border-radius: 1.3px;
- border: 0.2px solid #010101;
- }
- input[type=range]::-webkit-slider-thumb {
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
- cursor: pointer;
- -webkit-appearance: none;
- margin-top: -14px;
- }
- input[type=range]:focus::-webkit-slider-runnable-track {
- background: #367ebd;
- }
- input[type=range]::-moz-range-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- animate: 0.2s;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- background: #3071a9;
- border-radius: 1.3px;
- border: 0.2px solid #010101;
- }
- input[type=range]::-moz-range-thumb {
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
- cursor: pointer;
- }
- input[type=range]::-ms-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- animate: 0.2s;
- background: transparent;
- border-color: transparent;
- border-width: 16px 0;
- color: transparent;
- }
- input[type=range]::-ms-fill-lower {
- background: #2a6495;
- border: 0.2px solid #010101;
- border-radius: 2.6px;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- }
- input[type=range]::-ms-fill-upper {
- background: #3071a9;
- border: 0.2px solid #010101;
- border-radius: 2.6px;
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- }
- input[type=range]::-ms-thumb {
- box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
- border: 1px solid #000000;
- height: 36px;
- width: 16px;
- border-radius: 3px;
- background: #ffffff;
- cursor: pointer;
- }
- input[type=range]:focus::-ms-fill-lower {
- background: #3071a9;
- }
- input[type=range]:focus::-ms-fill-upper {
- background: #367ebd;
- }
完成的range input
添加这些样式后得到的输入框如下:
相关文章
- CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小,本文主要介绍了css实现电梯导航,具有一定的参考价值,感兴趣的可以了解2023-05-06
- 本文主要介绍了CSS中calc(100%-100px)不加空格不生效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2023-05-05
- 本文主要介绍了css弧边选项卡的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-05-05
- Css(层叠样式表)是种格式化网页的标准方式,用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,2023-05-04
- CSS的link和@import都是用于引入外部CSS文件的方法,但它们有一些区别和不同的用法,本文通过一个简单的代码演示,展示了link和@import的用法,感兴趣的朋友跟随小编一起看2023-05-04
- 这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的,做出来的百叶窗效果也是很丝滑,文中提供了详细的代码,需要的朋友可以参考2023-04-28
- 这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的,文中提供了详细的代码,需要的朋友可以参考下2023-04-28
- 本文主要介绍了css旋转导航的示例代码,文中通过示例代码介绍的非常详细,该导航可用在一些网站首页导航栏中,需要的朋友们下面随着小编来一起学习学习吧2023-04-27
- 这篇文章将介绍如何使用CSS实现交融文字效果,这是一种独特的标题设计,可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性,我们可以创建出字母之间交2023-04-27
- 在使用弹性布局的时候,必然会有碰到分配子元素空间问题,本文主要介绍了flex子元素内容超出盒子容器宽度问题解决,感兴趣的可以了解一下2023-04-24
最新评论