按输入范围更改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/