如何让CSS属性选择器使用输入框当前值而非初始value属性值？

为什么修改输入值后选择器仍能匹配元素？ #

CSS属性选择器input[value='foo']匹配的是HTML标签上的原始属性值——也就是页面初始化时写在<input>标签里的value="foo"。用户修改输入框内容后，只会更新DOM元素的value属性（JS中通过element.value获取），但HTML标签的原始value属性不会被改变（可以用element.getAttribute('value')查看，依然是初始值），所以选择器依然能找到该元素。

如何匹配input的当前输入值？ #

原生CSS选择器无法直接匹配input的当前输入值，推荐通过JavaScript实现，也可以用受限的CSS伪类方案：

方案1：JavaScript遍历过滤元素

直接获取所有input元素，检查它们的当前value值是否符合要求：

document.querySelector("#button").addEventListener("click", function() {
    // 遍历所有input，找到当前值为'foo'的元素
    var targetInput = Array.from(document.querySelectorAll('input')).find(input => input.value === 'foo');
    if (targetInput) {
        alert("element found");
    } else {
        alert("element not found");
    }
});

方案2：CSS伪类配合pattern属性（局限性大）

如果匹配规则固定，可以给input添加pattern属性，结合:valid伪类匹配符合规则的输入值：

<div>
  <label>
    Label:<input value="foo" pattern="^foo$" required>
  </label>
  <button id="button">
    Check if value is 'foo'
  </button>
</div>

document.querySelector("#button").addEventListener("click", function() {
    var element = document.querySelector('input:valid');
    if (element) {
        alert("element found (value is 'foo')");
    } else {
        alert("element not found (value is not 'foo')");
    }
});

注意：该方案需要给input加上required属性，或用户已输入内容，:valid才会生效；pattern是正则表达式，^foo$表示精确匹配'foo'。若需匹配多种值，此方法受限，优先选方案1。

内容的提问来源于stack exchange，提问作者Daniel Black