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

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

因此你应该使用这两个中的一个，正如其他答案中所解释的那样，这不应该是已接受的答案。

<input type="range">非常新，您已尝试使用CSS自定义它。：）

我不会尝试这两个原因：

现在和未来几年（或许多年）可能存在巨大的兼容性问题。认为现在像<select>这样的表单控件（自Web启动以来可用）仍然存在问题，需要以跨浏览器的方式使用CSS进行自定义。例如，如果为选择框设置padding，则许多浏览器（IE7，OPERA9，CHROME5，SAFARI4）将完全忽略填充。它仅适用于IE8和FF 3.6。（所有测试都是使用HTML5 DOCTYPE完成的，所以在标准模式下）。
<input type="range">已创建为显示滑块而非进度条，尝试使用CSS作弊，以便将滑块转换为进度条听起来很奇怪。就像尝试使用CSS将<textarea>更改为表格一样，但为什么不简单地使用<table>来表示表格？！

要在HTML5中显示进度条，您应该按照 marcgg 在其答案中提供的建议。由于当前没有浏览器呈现它，你可以使用一个带有p的简单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>

然后只需更新内部style.width元素的P，如：

width: 75%

仅供参考：如果你想在简单的JS中这样做，那么代码是：

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

Answer 4

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

[2016年11月24日更新]

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

这是一个例子：

＆＃13;

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

＆＃13;

<input type="range">

＆＃13;

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

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

10 个答案: