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

How to customize the HTML5 input range type looks using CSS?

提问by ptamzz

I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.

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

Can any one direct me how to customize it??

任何人都可以指导我如何定制它？

采纳答案by Marco Demaio

EDIT: nowadays all major browser support both

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

• <progress>

• input[type='range']

• <进度>

• 输入[类型='范围']

Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.

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

---

---

The <input type="range">is pretty new and you are already attempting to customize it with CSS. :)

这<input type="range">是相当新的，您已经在尝试使用 CSS 对其进行自定义。:)

I wouldn't try that for two reasons:

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

1. there might be huge compatibility issues now and for the next few (or many) years. Think that in nowadays a form control like <select>(available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a paddingfor the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding. It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).

2. The <input type="range">has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea>into a table, but why don't you simply use a <table>to render tables?!

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

2. 在<input type="range">已经建立，以显示滑块不是一个进度条，试图以改造滑块到进度条听起来离奇用CSS就可以欺骗。就像尝试使用 CSS 将 a 更改<textarea>为表格一样，但为什么不简单地使用 a<table>来呈现表格？！

To show a progress bar in HTML5 you should follow the suggestion given by marcggin his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:

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

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

Then simply update the style.widthof inner Pelement in percent like:

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

width: 75%

FYI: if you want to do that in simple JS here is the code:

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

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

回答by Eyal

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

回答by marcgg

If you're using HTML 5, why not use the progresstag?

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

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

回答by nlfonseca

I did a cross-browser solution (+IE9, FF, Chrome, Safari), only CSS.

我做了一个跨浏览器的解决方案（+IE9、FF、Chrome、Safari），只有 CSS。

[Updated 24.11.2016]

[2016 年 11 月 24 日更新]

http://codepen.io/nlfonseca/pen/MwbovQ

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

回答by Lea Verou

You can in Webkit, through the -webkit-slider-thumbpseudo-element: http://jsfiddle.net/leaverou/BNm8j/

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

Although the others are right about input type="range"not being the right element for the job.

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

You should use the <progress>element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/

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

回答by Niraj Chauhan

You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumband input[type="range"].

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

Here is the example of it,

这是它的例子，

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

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

I know this is already answered but just sharing it.

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

回答by inorganik

jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].

jQuery Tools 提供了一个插件，可以从范围输入中创建可样式化的元素，更重要的是，它仍然可以在不支持input[type=range].

Allows you to style:

允许您设置样式：

• the handle
• the slider
• optional progress fill
• value output field

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

I've used it many times and it's a great tool.

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

WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

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

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

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

回答by acarlon

When I looked at this question I needed something simple. There are already a number of framework answers on how to do this, but sometimes it is more lightweight and flexible just to create your own. Of course, you get a certain amount for free with a framework (and it is often the right choice if it is a good fit), but you then have to worry about framework compatibility, support and digging into the depths of the framework to go outside its boundaries.

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

Here is a simple javascript-only slider. Basically it is an img for the slider, an img for the button and a callback with a progress percent. Not an all-singing and dancing slider, but something simple to build on.

这是一个简单的 javascript-only 滑块。基本上它是滑块的 img，按钮的 img 和带有进度百分比的回调。不是一个能歌善舞的滑块，而是一个简单的构建。

The demo

演示

The HTML

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>

The script

剧本

Place in a javascript file:

放在一个 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 || {}));

Example use

示例使用

HTML:

HTML：

<img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'>

Javascript:

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

回答by edCoder

This is an example:

这是一个例子：

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

回答by Oriol

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

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

It's a tool that produces cross-browser code to style both native and webshims range inputs like you want.

它是一种生成跨浏览器代码的工具，可以根据需要设置本机和 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;
}