html - 通过输入范围更改 css 规则

Question

我可以在没有js的情况下通过输入范围更改elem的css规则吗？像这样：

  <input type="range" min="0" max="100">
  <span>Some text</span>


 input[value="0"]+span {background:red;}
 input[value="50"]+span {background:green;}

Answer 1

不，CSS 解析器会寻找一个名为的属性value，其值为0. 这是一种愚蠢的语言，并不是为了解释你所希望的方式。您可以添加 JS 以在范围更改时为输入提供value具有适当值的实际属性，然后 CSS 会接受它。

示例 jQuery 片段：

$('[type="range"]').on('change', function() {
    $(this).attr('value', this.value);
}).change();

演示：http: //jsfiddle.net/seancannon/FqZZz/