在查看了除 Gecko 源代码之外的所有内容之后，我对以下行为感到有些困惑。我想看看是否可以根据用户输入的值设置文本输入的样式，最终得到了这个 CSS:
input[value="password"] {
border:1px solid red;
}
问题是，似乎输入的值仅在元素创建时检查，如 in this example 所示。 .
是否可以在不使用 JavaScript 的情况下完成此任务？为什么浏览器不会相应地更新样式？
最佳答案
它不起作用，因为属性选择器“匹配具有源文档中定义的某些属性的元素”( 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="?"，用户应该用此输入替换该初始值。
关于css - 仅使用 CSS 根据键入的数据设置文本输入样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8528772/