纯 CSS 的 webkit 样式输入范围

Question

我想自定义输入类型范围，如 this。

我尝试使用以下代码来更改缩略图，但所选范围的颜色没有更改。

HTML:

<input type="range" />

CSS:

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: red;
  cursor: pointer;
  border: none;
  margin-top: -8px;
}

input[type=range] {
  -webkit-appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  height: 30px;
  width: 100%;
}

有人可以建议我更改选定的可运行轨道背景颜色吗？

Answer 1

Ionic 框架使用有趣的方法来设置范围输入轨道的样式，仅需 CSS。他们正在向 ::-webkit-slider-thumb 添加 ::before pseudo-element，使其尽可能宽，然后将其放置在轨道顶部。（我无法border-radius使用它。）

input[type='range'] {
  width: 210px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: #AAA;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: steelblue;
  border-radius: 50%;
  border: 2px solid white;
}
input[type='range']::-webkit-slider-thumb::before {
  position: absolute;
  content: '';
  height: 10px; /* equal to height of runnable track */
  width: 500px; /* make this bigger than the widest range input element */
  left: -502px; /* this should be -2px - width */
  top: 8px; /* don't change this */
  background: #777;
}

<div class="container">
  <input type="range" min="0" max="100" value="10" />
</div>

~~据我所知，对于支持 Webkit 的浏览器（和 FF）~~，没有纯粹的 CSS 方法来做到这一点。 IE 提供了一种使用 -ms-fill-lower 和 -ms-fill-upper 来为轨道的两个部分设置样式的方法，但 WebKit 中没有等效项，因此需要 JavaScript。

您可以使用 linear-gradient 作为可运行轨道的背景图像，然后使用 JavaScript 更改 background-size 以达到所需的效果。由于问题特定于 Webkit，因此提供的代码段 目前仅适用于支持 Webkit 的浏览器 。此方法确实允许我们向轨道添加 border-radius。

此片段改编自 Ana Tudor 的 CodePen Demo。该演示也有使其在其他浏览器中工作的方法。

window.onload = function() {
  var input = document.querySelector('input[type=range]'),
    style_el = document.createElement('style'),
    styles = [],
    track_sel = ['::-webkit-slider-runnable-track'];
  document.body.appendChild(style_el);

  styles.push('');

  input.addEventListener('input', function() {
    var min = this.min || 0,
      max = this.max || 100,
      c_style, u, edge_w, val, str = '';

    this.setAttribute('value', this.value);

    val = this.value + '% 100%';
    str += 'input[type="range"]' + track_sel[0] + '{background-size:' + val + '}';

    styles[0] = str;
    style_el.textContent = styles.join('');
  }, false);
}

input[type='range'] {
  width: 210px;
  height: 50px;
  cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: linear-gradient(to right, #777, #777), #AAA;
  background-size: 10% 100%;
  background-repeat: no-repeat;
  border-radius: 5px;
}
input[type='range']::-webkit-slider-thumb {
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: steelblue;
  border-radius: 50%;
  border: 2px solid white;
}

<div class="container">
  <input type="range" min="0" max="100" value="10" />
</div>

Answer 2

我得到了一个不使用样式标签但 css variable:

的解决方案

const input = document.querySelector("input");

function setBackgroundSize(input) {
  input.style.setProperty("--background-size", `${getBackgroundSize(input)}%`);
}

setBackgroundSize(input);

input.addEventListener("input", () => setBackgroundSize(input));

function getBackgroundSize(input) {
  const min = +input.min || 0;
  const max = +input.max || 100;
  const value = +input.value;

  const size = (value - min) / (max - min) * 100;

  return size;
}

input[type='range'] {
  width: 400px;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, #293043, #293043), #D7D7D7;
  background-size: var(--background-size, 0%) 100%;
  background-repeat: no-repeat;
  border-radius: 5px;

}

input[type='range']::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  cursor: pointer;
  background: #293043;
  border: solid white 1px;
  border-radius: 50%;
  margin-top: -6px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}

/** FF*/

input[type="range"]::-moz-range-progress {
  background-color: #293043;
  border-radius: 5px;
}

input[type="range"]::-moz-range-track {
  background-color: #D7D7D7;
  border-radius: 5px;
}

input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  cursor: pointer;
  background: #293043;
  border: solid white 1px;
  border-radius: 50%;
  margin-top: -6px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}

<input type="range" min="5" max="95" step="1" value="15">

这适用于 Chrome 和 Firefox :)。

纯 CSS 的 webkit 样式输入范围

Styling input range for webkit with pure CSS

html

css

pseudo-element

input-type-range