美化<input type="range">控件代码实例

最新推荐文章于 2021-10-12 17:38:07 发布
最新推荐文章于 2021-10-12 17:38:07 发布
阅读量140 收藏 2
点赞数
原文链接：https://yq.aliyun.com/articles/572671
版权
本章节分享一段代码实例，它实现了美化<input type="range">控件的功能。

代码实例如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
< html >
< head >
< meta charset = "gb2312" >
< title >蚂蚁部落</ title >
< style >
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;  
   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;  
   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;  
   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;  
} 
</ style >
</ head >
< body >
< input type = "range" style = "width:200px;" >
</ body >
</ html >


原文发布时间为：2017-2-26

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：美化<input type="range">控件代码实例

weixin_34130389
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义(滑动条)input[type="range"]样式 下载
01-21
对应博客：http://blog.csdn.net/u013347241/article/details/51560290
自定义(滑动条)input[type="range"]样式
热门推荐
清风的博客
06-02 13万+
这是我的第一篇博文，也是我这个小白努力的起点。刚接触JavaScript没多久，如果文中有错误的地方欢迎大家指正，或者给予建议，让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件，也是常见的控件的之一，不过这个控件的原始样式略丑，所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不支
美化input type=range标签滑动样式（带渐变效果）
weixin_30664539的博客
04-26 811
input原来的样式就不在此赘述了： 下面看一下实际项目中用到的input输入框，同步绑定输入数据，实现输入框双向绑定（实际项目中使用的是vue框架）： html部分： <div class="inputRatio"> 滑动条：<input type="range" name="ratio" :value="parseInt(ratio)" @inpu...
html range 样式,美化 input range 控制条
weixin_39694174的博客
06-21 1721
平常我们使用制作进度条的时候都是想的用 div 去模拟，在 html5 后，我们可以使用 input range 来实现这样的效果。默认的效果如图:你可以设置它的值得范围(min, max) 以及它的步长(step)。这里的重点是设置它的样式啦:取消掉默认的样式在 chrome 和 safari 下我们可以通过声明:-webkit-appearance: none;取消掉默认的样式，这时候效果如图...
HTML5 input新增type属性color颜色拾取器的实例代码
09-22
其中，`<input>`元素是HTML5中用于创建表单输入控件的重要部分。在HTML5中，`<input>`元素的`type`属性得到了扩展，增加了更多的类型，比如`color`，这使得开发者可以更方便地在网页中集成颜色选择功能。 `type=...
HTML5新增form控件和表单属性实例代码详解
12-13
<input type="range" min="1" max="100" step="5"> ``` 6. **`number`** - 只能包含数字的输入框，可以配合`min`, `max`和`step`属性进行限制。 ```html <input type="number" min="1" max="100"> ``` 7. **`...
JavaScript实战(原生range和自定义特效)简单实例
11-28
本实例中，我们将探讨如何利用原生`<input type="range">`滑块控件以及完全自定义的滑动效果来实现动态显示和美观的设计。 首先，原生`<input type="range">`控件在HTML5中被引入，它提供了一种简单的用户界面，...
HTML+5开发精要与实例详解代码清单
03-05
2. 表单控制：HTML5新增了`<input type="date">`, `<input type="email">`, `<input type="range">`等表单控件，提高了用户输入的便捷性和数据验证功能。 3. canvas元素：提供了一个在网页上绘制2D图形的画布，通过...
input range滑动条样式自定义
IT小小酥的博客
08-04 2363
input[type="range"]的样式在谷歌，火狐，IE下的样式各不相同，而实际往往需要固定的样式，这里做了三个浏览器下样式处理，IE只支持9+。        上面是效果图。 首先清除浏览器默认的range样式。        input[type=range]{ width: 556px; height: 17px; ...
自定义(滑动条)input[type="range"]两个样式
10-08
自定义(滑动条)input[type="range"]样式； 完成以下的五个步骤： 去除系统默认的样式； 给滑动轨道(track)添加样式； 给滑块(thumb)添加样式； 根据滑块所在位置填充进度条； 实现多浏览器兼容。
滑动条input[type=“range“]样式自定义
学习记录
10-12 477
UI画界面真好看，先为UI设计点个赞 但是不得不吐槽一下，我写这个写了一天了，快写吐了都…… 先来看看UI部分界面效果图吧 以下是实现的代码（参考了好多优秀的博客，一把辛酸泪）(╥﹏╥) 1.HTML代码 .clear{overflow:hidden;} .fl{float:left;} .fr{float:right;} <div class="adjust"> <div class="aj_tempt clear"> <img class="temp_ico
input type=range样式设置，分别设置左右颜色，增大点击有效范围
zengyongdm的博客
02-17 1万+
html5中input的type=range时，是数字选择器，下面是改变其默认样式，设置自定义样式的方法，并且避免点击范围太小的情况。
input[range]的简单使用及样式修改
m0_47587616的博客
08-28 4757
使用 最近项目上有个需求要做一个可以拖动的条，并且可以根据拖动的不同位置进行相应的操作，所以就找了找有没有什么html5可以直接用的东西，因此就找到了input[type=“range”]这个东西。东西是找到了，但是有一个问题，样式巨丑。。。 所以在此简单介绍下如何修改样式及一个做成的小demo 样式的修改 和其他不能设置直接设置的input组件一样，range的使用也是先把它默认的样式给他干掉，即在对应的css中先加上一句 -webkit-appearance: none 或者 appearance: n
Html 5 Input type=range 滑动条
蚩尤后裔-汪茂雄
03-25 6051
目录 Input type=range 概述 单个滑动条编码示例 多个滑动条编码示例 修改滑动条默认样式 Input type=range 概述 1、HTML5 拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，range 就是其中一个。 2、range 类型用于应该包含一定范围内数字值的输入域，可以设定对所接受的数字进行限定： 属性 值 描述 max...
range滑块自定义样式，步骤详解以及实际应用
weixin_33675507的博客
04-16 1438
写在前面： 本文的主要内容包括：type="range"属性介绍，修改range默认css样式以及在js中的实际应用。本文面向前端小白，写的不好之处，请多多见谅。文末有demo链接，可以自行复制到本地进行试验。 相关：自定义 range radio select的样式滑轮，按钮，选择框 最终要实现的效果： 其中包括一部分js代码 步骤： 1.range属性相关介绍 2.搭建html结构； 3.cs...
<input type="range">标签用法实例代码
weixin_33670786的博客
03-01 252
在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。 代码如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 ...
CSS实现自定义滑动条(input)，动态监听改变数值
眺望远方
06-03 1720
有时候我们需要一个滑杆滑动，可以移动的同时，还能够获取到从小到大的数值，如图： 向后滑动值越大，能够做到实时监听。我的可能不是最优解决方案，仅供大家参考！ 代码如下： 这是建立一个input元素，最小值为0，最大值为100，每次加1，默认值为10. 样式如下： input[type=“range”] { display: block; -webkit-appearance: none; bac...
input表单中的Range
xiaobai的博客
11-17 754
这里写代码片 <script> function change() { var a=document.getElementById("a"); var out=document.getElementById("output"); out.value=a.value; } </script>
HTML5中文教程：从入门到精通指南
6. **HTML5表单元素和属性**：更新了表单元素和属性，如`<fieldset>`、`<legend>`、`<form>`、`<label>`，以及新的表单控件，如`<input type="range">`、`<input type="color">`等。 7. **HTML5参考手册**：这部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值