针对表单域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里的正则表达式等效的校验算法。

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

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号