如何使用 CSS 自定义 HTML5 输入范围类型的外观？

Question

我想自定义 HTML5 中范围输入类型的外观，使其看起来像一个进度条。我尝试使用 CSS 类应用一些常见的 CSS 属性，但似乎它们不起作用。

谁能指导我如何定制它？？

Answer 1

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;
}

Answer 2

如果您使用的是 HTML 5，为什么不使用 progress 标记？

<progress value="1534602" max="4603807">33%</progress>

Answer 3

编辑：现在所有主流浏览器都支持

• <progress>

• input[type='range']

因此您应该使用这两个中的一个，如其他答案中所述，这不再是公认的答案。

---

<input type="range"> 非常新，您已经尝试使用 CSS 对其进行自定义。 :)

我不会尝试这样做有两个原因：

1. 现在和未来几年（或多年）可能存在巨大的兼容性问题。 想想现在，像<select> 这样的表单控件（自网络启动以来就可用）仍然无法以跨浏览器的方式使用 CSS 进行自定义。例如，如果您为选择框设置padding，许多浏览器（IE7、OPERA9、CHROME5、SAFARI4）将完全忽略填充。 它仅适用于 IE8 和 FF 3.6。 （所有测试都是使用 HTML5 DOCTYPE 完成的，所以在标准模式下）。

2. <input type="range"> 被创建为显示滑块而不是进度条，试图用 CSS 欺骗它以便将滑块转换为进度条，这听起来很奇怪。就像尝试使用 CSS 将 <textarea> 更改为表格一样，但为什么不直接使用 <table> 来渲染表格？！

要在 HTML5 中显示进度条，您应该遵循 marcgg 在他的回答中给出的建议。由于当前没有浏览器正在渲染它，您可以使用一个简单的 div，里面有一个 p，如下所示：

<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;">&nbsp;</p>
</div>

然后简单地更新内部P元素的style.width，以百分比表示：

width: 75%

仅供参考：如果你想在简单的 JS 中做到这一点，这里是代码：

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';

Answer 4

我做了一个跨浏览器解决方案（+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;
  }
}

Answer 5

你可以在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" />

尽管其他人认为输入 type="range" 不是该工作的正确元素是正确的。

你应该使用<progress>元素，对于不支持它的浏览器，这个polyfill：http://lea.verou.me/polyfills/progress/

Answer 6

您可以使用input[type="range"]::-webkit-slider-thumb 和input[type="range"] 编辑范围输入的CSS。

这是它的例子，

http://webstutorial.com/range-input-slider-html5-css3/html-5

我知道这已经回答但只是分享它。

Answer 7

jQuery Tools 提供了一个插件，可以从范围输入创建可样式化的元素，此外，它还可以在不支持input[type=range] 的旧浏览器中作为滑块工作。

允许您设置样式：

• 把手
• 滑块
• 可选进度填充
• 值输出字段

我已经用过很多次了，它是一个很棒的工具。

警告：不适用于触控设备。我没有太多经验，但你可以试试 jQuery 移动滑块：http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

http://jquerytools.github.io/demos/rangeinput/index.html

Answer 8

当我看到这个问题时，我需要一些简单的东西。已经有许多关于如何做到这一点的框架答案，但有时它更轻量级和灵活，只是创建自己的。当然，您可以免费获得一定数量的框架（如果合适，通常是正确的选择），但是您必须担心框架的兼容性，支持和深入了解框架的深度在它的边界之外。

这是一个简单的纯 JavaScript 滑块。基本上它是滑块的 img、按钮的 img 和带有进度百分比的回调。不是一个能歌善舞的滑块，而是一个易于构建的东西。

The demo

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);
}

Answer 9

这是一个例子：

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">

Answer 10

见http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range

这是一个生成跨浏览器代码的工具，可以根据需要设置本机和 webshims 范围输入的样式。

.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;
}