如何自定义使用CSS的HTML5input范围types？
我想在HTML5中自定义范围inputtypes的外观看起来像一个进度条。 我已经尝试使用CSS类应用一些常见的CSS属性，但似乎他们不工作。
任何人都可以指导我如何定制它？
<input type="range">是非常新的，你已经试图用CSS来定制它。 🙂
我不会尝试，有两个原因：
-
现在和接下来的几年（或许多年）都可能会出现巨大的兼容性问题 。 想想现在像
<select>这样的表单控件（从网页开始就可以使用）仍然有问题要用跨浏览器的方式来定制CSS。 例如，如果您为select框设置padding，许多浏览器（IE7，OPERA9，CHROME5，SAFARI4）将完全忽略填充。 它只适用于IE8和FF3.6。 （在标准模式下，所有testing都使用HTML5 DOCTYPE完成）。 -
已经创build了
<input type="range">来显示一个不是进度条的滑动条 ，试图用CSS作弊来将滑动条转换成进度条，这听起来很奇怪。 像尝试使用CSS将<textarea>更改为表格，但为什么不简单地使用<table>来渲染表格？
要在HTML5中显示进度条，您应该遵循marcgg在他的回答中给出的build议。 由于目前没有浏览器正在渲染它，你可以像这样使用一个简单的div与ap：
<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;"> <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;"> </p> </div>
然后简单地更新内部P元素的style.width ，百分比如下：
width: 75%
供参考：如果你想这样做简单的JS这里是代码：
document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';
input[type='range'] { -webkit-appearance: none !important; background:red; height:7px; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; background:blue; height:10px; width:10px; }
如果您使用HTML 5，为什么不使用progress标签？
<progress value="1534602" max="4603807">33%</progress>
我做了一个跨浏览器的解决scheme（+ IE9，FF，Chrome，Safari），只有CSS。
[更新24.11.2016]
http://codepen.io/nlfonseca/pen/MwbovQ
@import 'bourbon'; $slider-width-number: 240; $slider-width: #{$slider-width-number}px; $slider-height: 2px; $background-slider: #c7c7c7; $background-filled-slider: #e33d44; $thumb-width: 28px; $thumb-height: 18px; $thumb-radius: 8px; $thumb-background: #fff; $thumb-border: 1px solid #777; $shadow-size: -8px; $fit-thumb-in-slider: -8px; @function makelongshadow($color, $size) { $val: 5px 0 0 $size $color; @for $i from 6 through $slider-width-number { $val: #{$val}, #{$i}px 0 0 $size #{$color}; } @return $val; } div { height: 100px; display: flex; justify-content: center; } input { align-items: center; appearance: none; background: none; cursor: pointer; display: flex; height: 100%; min-height: 50px; overflow: hidden; width: $slider-width; &:focus { box-shadow: none; outline: none; } &::-webkit-slider-runnable-track { background: $background-filled-slider; content: ''; height: $slider-height; pointer-events: none; } &::-webkit-slider-thumb { @include size($thumb-width $thumb-height); appearance: none; background: $thumb-background; border-radius: $thumb-radius; box-shadow: makelongshadow($background-slider, $shadow-size); margin-top: $fit-thumb-in-slider; border: $thumb-border; } &::-moz-range-track { width: $slider-width; height: $slider-height; } &::-moz-range-thumb { @include size($thumb-width $thumb-height); background: $thumb-background; border-radius: $thumb-radius; border: $thumb-border; position: relative; } &::-moz-range-progress { height: $slider-height; background: $background-filled-slider; border: 0; margin-top: 0; } &::-ms-track { background: transparent; border: 0; border-color: transparent; border-radius: 0; border-width: 0; color: transparent; height: $slider-height; margin-top: 10px; width: $slider-width; } &::-ms-thumb { @include size($thumb-width $thumb-height); background: $thumb-background; border-radius: $thumb-radius; border: $thumb-border; } &::-ms-fill-lower { background: $background-filled-slider; border-radius: 0; } &::-ms-fill-upper { background: $background-slider; border-radius: 0; } &::-ms-tooltip { display: none; } }
你可以在Webkit中通过-webkit-slider-thumb伪元素： http : //jsfiddle.net/leaverou/BNm8j/
input[type=range] { -webkit-appearance: none; background-color: silver; width: 200px; height:20px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #666; opacity: 0.5; width: 10px; height: 26px; }
<input type="range" min="0" max="100" />
您可以使用input[type="range"]::-webkit-slider-thumb并input[type="range"]来编辑范围input的CSS。
这是它的例子，
http://webstutorial.com/range-input-slider-html5-css3/html-5
我知道这已经回答，但只是分享。
jQuery Tools提供了一个插件，用于从范围input中创build可样式化的元素，更重要的是，它在仍然不支持input[type=range]旧版本浏览器中仍然可以像滑块一样工作input[type=range] 。
让你风格：
- 手柄
- 滑块
- 可选的进度填充
- 值输出字段
我用过很多次，这是一个很棒的工具。
警告：在触摸设备上不起作用。 我没有太多的经验，但你可以尝试jQuery的移动滑块： http : //view.jquerymobile.com/1.3.0/docs/widgets/sliders/
当我看到这个问题时，我需要一些简单的东西。 关于如何做到这一点，已经有了一些框架答案，但是有时候为了创build你自己的答案，它更加轻便和灵活。 当然，你可以通过一个框架免费获得一定的金额（如果它是一个合适的话，通常是正确的select），但是你必须担心框架的兼容性，支持和挖掘框架的深度超出其界限。
这是一个简单的仅用于JavaScript的滑块。 基本上它是一个img的滑块，IMG的button和一个进度百分比的callback。 不是一个全部唱歌和跳舞的滑块，而是一些简单的构build。
演示
HTML
<div id='bb_sliderContainer' ondragstart="return false;" ondrop="return false;"> <img id='bb_slider' src='slider.png'/> <img id='bb_sliderButton' src='sliderbutton.png'/> </div>
剧本
放置在一个JavaScript文件中：
(function(bb,undefined){ bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate) { var halfButtonWidth = 5; var sliderMoving = false; var buttonElement = document.getElementById(buttonCssId); var sliderElement = document.getElementById(sliderCssId); var length = sliderElement.clientWidth; var leftPos = 0; var rightPos = leftPos + length; length = rightPos - leftPos; if( initialPercentage ) { var buttonPos = leftPos + initialPercentage / 100 * length; buttonElement.style.left = buttonPos - halfButtonWidth + 'px'; } buttonElement.addEventListener( 'mousedown', function(){ sliderMoving = true; } ); document.addEventListener( 'mousemove', function(event){ if( sliderMoving == true ) { var rect = sliderElement.getBoundingClientRect(); var mouseX = event.clientX - rect.left; var prop = mouseX / length; if( prop < 0 ) { prop = 0; mouseX = 0; } if( prop > 1 ) { prop = 1; mouseX = length; } buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px'; progressUpdate(prop * 100); } }); document.addEventListener( 'mouseup', function(){ sliderMoving = false; }); } }(window.bb = window.bb || {}));
使用示例
HTML：
<img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>
使用Javascript：
function sliderUpdate(percentage) { var sliderSubject = document.getElementById('bb_sliderSubject'); sliderSubject.style.width = percentage + '%'; } window.onload=function() { var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate); }
这是一个例子：
input[type='range'] { -webkit-appearance: none; border-radius: 5px; box-shadow: inset 0 0 5px #333; background-color: #999; height: 10px; vertical-align: middle; } input[type='range']::-moz-range-track { -moz-appearance: none; border-radius: 5px; box-shadow: inset 0 0 5px #333; background-color: #999; height: 10px; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; border-radius: 20px; background-color: #FFF; box-shadow:inset 0 0 10px rgba(000,000,000,0.5); border: 1px solid #999; height: 20px; width: 20px; } input[type='range']::-moz-range-thumb { -moz-appearance: none; border-radius: 20px; background-color: #FFF; box-shadow:inset 0 0 10px rgba(000,000,000,0.5); border: 1px solid #999; height: 20px; width: 20px; }
<input type="range">
请参阅http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range
这是一个生成跨浏览器代码的工具，可以按照自己的喜好设置本机和Webshims范围input的样式。
.ws-range, input[type="range"] { /* Range styles: width, height, border-radius, background */ -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0; } .ws-range .ws-range-thumb { /* Thumb styles: width, height, border, border-radius, background */ } .ws-range.ws-focus .ws-range-thumb { /* Thumb focus styles: border-color, background */ } .ws-range.ws-active .ws-range-thumb { /* Thumb active styles: border-color, background */ } .ws-range .ws-range-min { /* Thumb progress styles: display, background */ border-radius: /* same as range */; height: 100%; } input[type="range"]::-moz-range-track { border: none;background: transparent; } input[type="range"]::-ms-tooltip { display: none; } input[type="range"]::-webkit-slider-thumb { /* Thumb styles: width, height, border, border-radius, background */ -webkit-appearance: none; } input[type="range"]::-ms-track { /* Range styles: width, height, border-radius, background */ color: transparent;border: 0; } input[type="range"]::-moz-range-thumb { /* Thumb styles: width, height, border, border-radius, background */ } input[type="range"]::-ms-thumb { /* Thumb styles: width, height, border, border-radius, background */ } input[type="range"]:focus::-webkit-slider-thumb { /* Thumb focus styles: border-color, background */ } input[type="range"]:focus::-moz-range-thumb { /* Thumb focus styles: border-color, background */ } input[type="range"]:focus::-ms-thumb { /* Thumb focus styles: border-color, background */ } input[type="range"]:active::-webkit-slider-thumb { /* Thumb active styles: border-color, background */ } input[type="range"]:active::-moz-range-thumb { /* Thumb active styles: border-color, background */ } input[type="range"]:active::-ms-thumb { /* Thumb active styles: border-color, background */ } input[type="range"]::-moz-range-progress { /* Thumb progress styles: display, background */ border-radius: /* same as range */; height: 100%; } input[type="range"]::-ms-fill-lower { /* Thumb progress styles: display, background */ border-radius: /* same as range */; height: 100%; } .no-cssrangeinput input[type="range"] { background: transparent;margin: 0;border: 0;min-height: 51px; }
