css - 仅使用 CSS 根据键入的数据设置文本输入样式

Question

在查看了除 Gecko 源代码之外的所有内容之后，我对以下行为感到有些困惑。我想看看我是否可以根据用户输入的值设置文本输入的样式，并最终得到了这个 CSS:

input[value="password"] {
  border:1px solid red;
}

问题是，输入的值似乎只在元素创建时检查，如in this example所示.

是否可以在不使用 Javascript 的情况下完成此操作？为什么浏览器不会相应地更新样式？

Answer 1

它不起作用，因为属性选择器“匹配具有源文档中定义的某些属性的元素”(Attribute selectors in CSS 2.1)。事情确实有点复杂，因为在 input 元素上调用 setAttribute('value','password') 会在许多浏览器(不是 IE)中导致匹配。但如果您不使用 JavaScript，这就无关紧要了。

然而，由于有限的浏览器支持和实现的复杂性，有一种间接的方法，尽管目前它主要是理论上的。你可以这样写:

<style>
input:valid { border: 1px solid red; }
</style>
<input pattern=password id=x>

这使用了 HTML5 pattern 属性，在本例中指定了一个正则表达式，它只是一个没有通配符的固定字符串，并且 the CSS3 Basic UI :valid 测试元素状态是否满足有效性约束的伪类。这不适合正常使用(例如，在 IE 9 中不支持)，但在受控环境中的特殊情况下，这样的东西可能有用。

但是，支持此类功能的浏览器往往会报告自己的有效性错误，例如当值无效时方框周围有特殊颜色，我认为您无法在 CSS 中更改它 – JavaScript 可能会有所帮助，但是……所以报告可能与您的目标相冲突。此外，似乎支持这些功能的浏览器在框为空时将元素的状态视为有效。这很奇怪，尝试解决这个问题我使输入强制(HTML5 属性 required)似乎打开了新的蠕虫 jar 而不是修复。但也许在某些情况下，您可以只使用一些初始值，比如 value="?"，用户需要用这个输入替换它。