Question

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

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

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

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

Answer 1

它不起作用，因为属性选择器“匹配在源文档中定义了某些属性的元素”（Attribute selectors in CSS 2.1）。实际上事情有点复杂，因为在setAttribute('value','password')元素上调用input会导致许多浏览器（而不是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）似乎打开新的蠕虫而不是修复。但也许在某些情况下你可以使用一些初始值，比如说value="?"，用户应该用这个输入替换。

Answer 2

没有。 CSS无法检查输入字段的值是否超出了HTML结构中可用的值。

当您输入输入字段时，实际上并未更改HTML中的属性。

Answer 3

这不起作用，因为您实际上并未更改元素的value属性。例如，看看这个小提琴：

http://jsfiddle.net/jblasco/J9xSd/

它确实有效，因为value属性实际上已更改。只需键入字段，或通过您使用的Javascript方法更新它，就不会改变它。这对于稍后获取默认值通常很有用，但在这个意义上可能没那么有用。

仅使用CSS基于类型化数据设置文本输入的样式

3 个答案: