如何使用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

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

• <进度>

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

因此,您应该使用这两个中的一个,如其他答案中所解释的那样,这不应该是已接受的答案.

这<input type="range">是非常新的,您已经尝试使用CSS自定义它.:)

我不会尝试这两个原因:

1. 有可能是现在和未来数(或多个)年巨大的兼容性问题.可以认为,在现在,类似的表单控件<select>(自Web启动以来可用)仍然存在问题,需要使用CSS以跨浏览器方式进行自定义.例如,如果padding为选择框设置了一个,许多浏览器(IE7,OPERA9,CHROME5,SAFARI4)将完全忽略填充.它仅适用于IE8和FF 3.6.(所有测试均使用HTML5 DOCTYPE进行,因此在标准模式下).

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

要在HTML5中显示进度条,您应该遵循marcgg在其答案中给出的建议.由于目前没有浏览器渲染它,你可以使用一个简单的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;">&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.

[Updated 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和编辑范围输入的CSS input[type="range"].

这是它的例子,

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

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