HTML 范围输入不会更新其值

Question

我在标记中创建了一个范围输入，并将其值设置为 0，如下所示：

<input type="range" min="0" max="100" step="10" value="0">

我想根据其当前值对其进行样式设置。假设我想给它一个 50px 的边距，如果它的值为“10”。我编写了以下简单的 CSS 规则：

[type="range"][value="10"] {
    margin-top: 50px;
}

将范围输入滑动到 10 时，人们希望规则触发，但事实并非如此。然而，在标记中将输入的值设置为“10”时它会触发。

我在这里错过了什么吗？真的没有办法根据用户动态更改的值来设置范围输入的样式，仅使用 CSS 吗？

Answer 1

输入的值和值属性是两个独立的东西。value 属性表示 HTML 中指定元素的初始值。CSS 只能定位该属性，不幸的是不能定位元素的实际值。但是，您可以使用 javascript 读取更改时的当前值，然后使用输入的值更新 value 属性，然后您可以在 CSS 中定位该更新的属性。

document.getElementById('input').addEventListener('change',function() {
  this.setAttribute('value',this.value);
});

input[type="range"][value="10"] {
  margin-top: 10px;
}
input[type="range"][value="20"] {
  margin-top: 20px;
}

<input id="input" type="range" min="0" max="100" step="10" value="0">