样式上下填充HTML5范围输入 [英] Style lower and upper fill in HTML5 range input

问题描述

如这里所述，IE允许对下部和上部填充或轨道区域进行样式设置在CSS中如下：

< / *以下只影响IE中的范围输入* / input [type =range] :: - ms-fill-lower {background-color：red; } input [type =range] :: - ms-fill-upper {background-color：blue;}

 < input type =range>  

有人知道如何使用CSS或任何JS库将不同样式应用于Firefox，Chrome等范围输入的上下轨道？

UPDATE：

正如 Wilson F ，现在在Firefox中支持：

 < input type =range>  

解决方案

，请阅读文章使用CSS设置跨浏览器兼容范围输入/ a>作者：Daniel Stern。他的想法是让输入不可见，然后应用自定义样式。

他还开发了一个很好的在线工具，名为 randge.css ，其中选择样式预设和参数，并获得自动生成的CSS代码，如下所示：

  input [type = range] {-webkit-appearance：none; margin：10px 0;宽度：100％;}输入[type = range]：focus {outline：none;} input [type = range] ::  -  webkit-slider-runnable-track {width：100％; height：12.8px; cursor：pointer;动画：0.2s; box-shadow：0px 0px 0px＃000000，0px 0px 0px＃0d0d0d;背景：＃ac51b5; border-radius：25px; border：0px solid＃000101;} input [type = range] ::  -  webkit-slider-thumb {box-shadow：0px 0px 0px＃000000，0px 0px 0px＃0d0d0d; border：0px solid＃000000; height：20px; width：39px; border-radius：7px;背景：＃65001c; cursor：pointer; -webkit-appearance：none; margin-top：-3.6px;} input [type = range]：focus ::  -  webkit-slider-runnable-track {background：＃ac51b5;} input [type = range] ::  -  moz-range-track {width ：100％; height：12.8px; cursor：pointer;动画：0.2s; box-shadow：0px 0px 0px＃000000，0px 0px 0px＃0d0d0d;背景：＃ac51b5; border-radius：25px; border：0px solid＃000101;} input [type = range] ::  -  moz-range-thumb {box-shadow：0px 0px 0px＃000000，0px 0px 0px＃0d0d0d; border：0px solid＃000000; height：20px; width：39px; border-radius：7px;背景：＃65001c; cursor：pointer;} input [type = range] ::  -  ms-track {width：100％; height：12.8px; cursor：pointer;动画：0.2s;背景：透明; border-color：transparent; border-width：39px 0; color：transparent;} input [type = range] ::  -  ms-fill-lower {background：＃ac51b5; border：0px solid＃000101; border-radius：50px; box-shadow：0px 0px 0px＃000000，0px 0px 0px＃0d0d0d;} input [type = range] ::  -  ms-fill-upper {background：＃ac51b5; border：0px solid＃000101; border-radius：50px; box-shadow：0px 0px 0px＃000000，0px 0px 0px＃0d0d0d;} input [type = range] ::  -  ms-thumb {box-shadow：0px 0px 0px＃000000，0px 0px 0px＃0d0d0d; border：0px solid＃000000; height：20px; width：39px; border-radius：7px;背景：＃65001c;游标：指针;}输入[type = range]：focus ::  -  ms-fill-lower {background：＃ac51b5;} input [type = range]：focus ::  -  ms-fill-upper {background：＃ac51b5; } body {padding：30px;}  

 < input type =range>  

在IE上，但如果你不介意添加一些脚本，它可以模拟线性渐变。请参阅以下示例： codepen.io/ryanttb/pen/fHyEJ

As explained here, IE allows styling of the lower and upper fill or track regions in CSS as follows:

/* The following only affects the range input in IE */

input[type="range"]::-ms-fill-lower {
  background-color: red; 
}

input[type="range"]::-ms-fill-upper {  
  background-color: blue;
}

<input type="range">

Does anyone know of a way to apply different styles to the upper and lower tracks of a range input in Firefox, Chrome, etc. using CSS or any JS library?

UPDATE:

As pointed out by Wilson F, this is now supported in Firefox:

/* The following only affects the range input in FF */

input[type="range"]::-moz-range-progress {
  background-color: red; 
}

input[type="range"]::-moz-range-track {  
  background-color: blue;
}

<input type="range">  

解决方案

First of all, read the article Styling Cross-Browser Compatible Range Inputs with CSS by Daniel Stern. His idea is to make the input invisible and then apply the custom styles.

He also developed an excellent online tool named randge.css in which you select the style preset and parameters and get auto generated CSS code like the following one:

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

body {
  padding: 30px;
}

<input type="range">

Yes, with CSS only it's possible on IE only, but if you don't mind to add some scripting it can be simulated with linear gradient. See the following sample: codepen.io/ryanttb/pen/fHyEJ

这篇关于样式上下填充HTML5范围输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！