改变 input[type=range] css样式

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui, minimum-scale=1.0, maximum-scale=1.0"><title>type=range</title>
</head>
<style type="text/css">
.center{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;
-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;
-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.an_speed{width: 56%;}
#value1{text-align:center;}
input[type=range]{ margin-top: 8px;outline: none; -webkit-appearance: none;/*清除系统默认样式*/  width:100% !important;  background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd;  background-size: 30% 100%;/*设置左右宽度比例*/  height: 3px;/*横条的高度*/
} /*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {  -webkit-appearance: none;/*清除系统默认样式*/  height:16px;/*拖动块高度*/  width: 16px;/*拖动块宽度*/  background: #fff;/*拖动块背景*/ border-radius: 50%; /*外观设置为圆形*/  border: solid 1px #ddd; /*设置边框*/
}
</style>
<body>
<div class="an_speed"><div class="center"><span>1</span><input type="range" name="range_speed" id="range_speed" min="0" max="10" value="5" oninput="changeSpeed()" /><span>10</span></div><h2 id="value1">5</h2>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">    changeSpeed();function changeSpeed() {var value = $('#range_speed').val();var valStr = (value*10) + "% 100%";$('#value1').html(value);$('#range_speed').css({"background-size": valStr})};
</script>
</html>

转载于:https://www.cnblogs.com/Yjjhn/p/11404001.html

改变 input[type=range] css样式相关推荐

HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type=range]）
HTML 4.01 与 HTML5之间的差异以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
input type=range标签用法实例代码
在HTML5中,又新增许多新<input>控件类型,比较实用的一个就是<input type="range">,以滑竿的方式来调整value值,在这以前需要 ...
html range关联文本框,HTML5gt;meter标签与input(type=range)标签结合制作简易范围指示器...
HTML5>meter标签与input(type=range)标签结合制作简易范围指示器发布时间:2020-03-26 15:41 很多时候我们能看到这样的表示范围的优化工具,能给人带来很好的 ...
前端问题求助input type=“range”问题求助
目前我在做这样一个功能,PC端和手机端同步显示某个进度条. 原理是这样的,当我点击PC端的进度条时,手机端要跟着同步显示前端代码: <div class="one"> ...
自定义 input[type=checkbox]的样式
自定义 input[type="checkbox"]的样式对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框 ...
input[type=radio]自定义样式
input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...
input[type='radio'] 自定义样式___通过label标签重置input[radio]样式
每次都要重新写一遍,麻烦,所以直接写一个完整小栗子,可直接复制粘贴再修改一哈哈,这样就省事多了. 先给label标签绑定input,如此便可以,点击input或者label中包裹的文字时,都可以被选中 ...
html5可滑动的文本框,html5 input type=range实现拖拉滑条功能
本文是最新的html5技术实现拖拉条功能.实现如下图所示效果主要功能实现是在拖拉滑动条后,在后台处理textbox中相应的值.但是有的浏览器在拖动滑动条是,textbox里面的值一直变化,会频繁触 ...
html input type=quot;filequot;,input[type='file']默认样式
SVN权限管理转自:http://www.cnblogs.com/xingchen/archive/2010/07/22/1782684.html /************************ ...

改变 input[type=range] css样式

改变 input[type=range] css样式相关推荐

最新文章

热门文章