针对表单域input元素属性值的CSS选择器使用技巧

最近的编程中有这样一个需求：

上面这个input元素的属性值缺省是1，但用户可以输入其它大于1的值。但为了给用户更好的提醒。当这个属性值不为缺省值1时，这个input的元素的边框显示为红色。

这样的需求很简单，如果用JavaScript实现很容易，但是否可以用纯CSS实现呢？也就是使用css实现判断input的value属性是否为某个特定值而做出相应的css装饰效果。

最初的想法是这样的：

    input[value=1] { color: red; }​

实验结果是，这样的代码只能实现部分的要求。它能判断出input的value是否是1，但当你手动改变这个input的输入框里的值时，比如说改为2，这个css selector仍然认为input里的value值是1。

这不是css的bug，事实上， css的input属性选择器查询的是元素的属性值，不是DOM node的value的属性(elem.value)，当input表单域的值被手工改变时，前者并不会自动更新。所以input[value=1]选择器是一个静态的查询。

所以，这种css选择器是不行的。那么，如何实现能够动态跟踪input的属性值的css选择器呢？

使用input上的pattern属性，然后配合input:valid：

    input {
      color: black;
    }
    input:valid {
      color: green;
    }

    <input type="text" pattern="^1$">

在pattern的属性里用正则表达式里指定什么样的值是valid的，然后在css里使用:valid pseudo-class 来设定符合要求时的效果和不符合要求时的效果。

pattern属性是HTML5里出现的新属性，它适用于type类型为text, search, tel, url, email, 和 password等的input元素上，配合:valid伪类，就能实现JavaScript里的正则表达式等效的校验算法。

最后要注意的是，先看一下你的浏览器对这个技术的兼容情况，如果使用的是最新版的现代浏览器，应该都有很好的支持。