如何设置HTML5范围输入的样式以使滑块前后有不同的颜色？

Question

我希望左侧是绿色,右侧是灰色.如上图所示将是完美的.最好是一个纯CSS解决方案(只需要担心WebKit).

这样的事情可能吗？

Answer 1

使用这个简单的 css 属性来更改复选框、单选按钮和范围的颜色

input[type='range']{ accent-color: green; }

当前浏览器支持

Answer 2

纯CSS解决方案:

• Chrome:隐藏溢出input[range],并用阴影颜色填充拇指左侧的所有空间.
• IE:无需重新发明轮子:::-ms-fill-lower
• Firefox 无需重新发明轮子:::-moz-range-progress

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

<input type="range"/>

Answer 3

对的,这是可能的.虽然我不推荐它,因为input range所有浏览器都没有真正支持它,因为在HTML5中添加了一个新元素,而HTML5只是一个草稿(并且将会很长时间)所以尽管样式化它可能不是最好的选择.

此外,您还需要一些JavaScript.为了简单起见,我冒昧地使用jQuery库.

你去:http://jsfiddle.net/JnrvG/1/.

Answer 4

您可以简单地使用强调色（在 Chrome 99 中）

 <input style="accent-color: #2ecc71" type="range"/>

Answer 5

建立在@dargue3 的答案之上，如果您希望拇指比轨道大，您希望充分利用<input type="range" />元素并跨浏览器，则需要一些额外的 JS 和 CSS 行。

在Chrome / Mozilla浏览器可以使用linear-gradient的技术，但你需要调整基础上的比例min，max，value属性提到这里的@Attila O.。你需要确保你没有在 Edge 上应用它，否则不会显示拇指。@Geoffrey Lalloué在这里更详细地解释了这一点。

另一件值得一提的是，您需要rangeEl.style.height = "20px";在 IE/Older 上调整。简单地说，这是因为在这种情况下“高度不应用于轨道，而是应用于包括拇指在内的整个输入”。小提琴

/**
 * Sniffs for Older Edge or IE,
 * more info here:
 * https://stackoverflow.com/q/31721250/3528132
 */
function isOlderEdgeOrIE() {
  return (
    window.navigator.userAgent.indexOf("MSIE ") > -1 ||
    !!navigator.userAgent.match(/Trident.*rv\:11\./) ||
    window.navigator.userAgent.indexOf("Edge") > -1
  );
}

function valueTotalRatio(value, min, max) {
  return ((value - min) / (max - min)).toFixed(2);
}

function getLinearGradientCSS(ratio, leftColor, rightColor) {
  return [
    '-webkit-gradient(',
    'linear, ',
    'left top, ',
    'right top, ',
    'color-stop(' + ratio + ', ' + leftColor + '), ',
    'color-stop(' + ratio + ', ' + rightColor + ')',
    ')'
  ].join('');
}

function updateRangeEl(rangeEl) {
  var ratio = valueTotalRatio(rangeEl.value, rangeEl.min, rangeEl.max);

  rangeEl.style.backgroundImage = getLinearGradientCSS(ratio, '#919e4b', '#c5c5c5');
}

function initRangeEl() {
  var rangeEl = document.querySelector('input[type=range]');
  var textEl = document.querySelector('input[type=text]');

  /**
   * IE/Older Edge FIX
   * On IE/Older Edge the height of the <input type="range" />
   * is the whole element as oposed to Chrome/Moz
   * where the height is applied to the track.
   *
   */
  if (isOlderEdgeOrIE()) {
    rangeEl.style.height = "20px";
    // IE 11/10 fires change instead of input
    // https://stackoverflow.com/a/50887531/3528132
    rangeEl.addEventListener("change", function(e) {
      textEl.value = e.target.value;
    });
    rangeEl.addEventListener("input", function(e) {
      textEl.value = e.target.value;
    });
  } else {
    updateRangeEl(rangeEl);
    rangeEl.addEventListener("input", function(e) {
      updateRangeEl(e.target);
      textEl.value = e.target.value;
    });
  }
}

initRangeEl();

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 300px;
  height: 5px;
  padding: 0;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}


/*Chrome thumb*/

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 5px;
  /*16x16px adjusted to be same as 14x14px on moz*/
  height: 16px;
  width: 16px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*Mozilla thumb*/

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -moz-border-radius: 5px;
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge input*/

input[type=range]::-ms-track {
  width: 300px;
  height: 6px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 2px 0;
  /*remove default tick marks*/
  color: transparent;
}


/*IE & Edge thumb*/

input[type=range]::-ms-thumb {
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge left side*/

input[type=range]::-ms-fill-lower {
  background: #919e4b;
  border-radius: 2px;
}


/*IE & Edge right side*/

input[type=range]::-ms-fill-upper {
  background: #c5c5c5;
  border-radius: 2px;
}


/*IE disable tooltip*/

input[type=range]::-ms-tooltip {
  display: none;
}

input[type="text"] {
  border: none;
}

<input type="range" value="80" min="10" max="100" step="1" />
<input type="text" value="80" size="3" />

Answer 6

尽管从理论上讲，公认的答案是好的，但它忽略了这样的事实，即拇指不能大于轨道的大小，而不会被砍掉overflow: hidden。请参阅此示例，了解如何仅使用少量JS进行处理。

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + this.value + '%, #fff ' + this.value + '%, white 100%)'
};

#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

<div class="chrome">
  <input id="myinput" type="range" value="50" />
</div>

Answer 7

如果您使用 first answer，则拇指有问题。在 chrome 中，如果您希望拇指大于轨道，则框阴影会与轨道与拇指的高度重叠。

只需总结所有这些答案，并用较大的滑块拇指编写正常工作的滑块：jsfiddle

const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value

slider.style.background = `linear-gradient(to right, red 0%, red ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%)`

slider.oninput = function() {
  this.style.background = `linear-gradient(to right, red 0%, red ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)`
};

#myinput {
  border-radius: 8px;
  height: 4px;
  width: 150px;
  outline: none;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  width: 6px;
  -webkit-appearance: none;
  height: 12px;
  background: black;
  border-radius: 2px;
}

<div class="chrome">
  <input id="myinput" type="range" min="0" value="25" max="200" />
</div>

Answer 8

-webkit-appearance: none;使用时删除刻度线datalist。如果滑块的总体外观很好，但默认的蓝色（在 Chrome 中）需要适合主题颜色，请将 a 应用于filter: hue-rotate();元素input[type="range"]。可以使用其他过滤器。有些甚至改变滑块的背景颜色。

input[type="range"] {
  filter: hue-rotate(180deg); //rotate degrees to get desired color
}

<input type="range" min="0" max="5" step="1" list="data" value="1" />
<datalist id="data">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>

Answer 9

这是一个小更新：

如果使用以下内容，它将动态更新，而不是释放鼠标。

“更改mousemove”功能

<script>
$('input[type="range"]').on("change mousemove", function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #2f466b), '
                + 'color-stop(' + val + ', #d3d3db)'
                + ')'
                );
});</script>

Answer 10

以前接受的解决方案不再有效。

我最终编写了一个简单的函数，该函数将 包装range到一个样式容器中，在光标之前添加所需的栏。我写了这个例子，其中很容易看到css中设置的两种颜色“蓝色”和“橙色”，因此可以快速修改它们。