有没有办法仅使用 CSS 来定位具有值的所有文本区域？答案

【问题标题】：Is there a way to target all textareas with a value using CSS only?有没有办法仅使用 CSS 来定位具有值的所有文本区域？
【发布时间】：2013-04-06 19:36:40
【问题描述】：

我认为这很简单，但我找不到任何表明我可以使用 CSS 来定位页面上的非空文本区域。

如果 CSS 绝对不支持，我可以使用 JS，但即使使用 jQuery，我也找不到使用选择器的方法，但必须明确检查 .val()。

一些上下文：我有一个可扩展焦点的可选文本区域，但如果用户确实决定键入某些内容，我不希望它在焦点离开时再次缩小。

【问题讨论】：

如果不是因为 textarea 的可选特性，就会有 :invalid 选择器（问题是它需要元素上的 required 属性）选择器（在支持的浏览器），因为它是:empty 可能是唯一的选择。

【解决方案1】：

标记方面，:empty 选择器应该允许您选择绝对没有内容的文本区域，甚至没有空格或换行符。相反，:not(:empty) 应该让您选择非空文本区域。

CSS 中的选择器大多是静态的，这意味着它们不会考虑动态变化，例如在页面加载后编辑文本区域的内容。此外，像:empty 这样的选择器并没有真正考虑到文本区域的值，因为它通常检查内容节点的存在（或不存在），所以我怀疑它不能很好地处理表单。

如果您需要根据表单字段的值动态应用样式，则需要使用脚本在每次更新时使用 .val() 或类似的方式检查其值。

【讨论】：

谢谢，但是 :empty 选择器用于定位没有子节点的元素，并且似乎不适用于输入元素。我想如果输入的内容实际上是在标签之间的标记中，它会起作用，但在这种情况下，它不是。
@Mohammad：应该有no space in your selector。

【解决方案2】：

是的，你可以在 jQuery 中这样做：

$('textarea:not(:empty)').css('color','red');

【讨论】：

【解决方案3】：

看:invalid & :validCSS3伪类：

<textarea required="required"></textarea>

textarea:invalid{background:red}
textarea:valid{background:blue}

【讨论】：

【解决方案4】：

用.filter()怎么样？

    $("input").filter(function() { return this.value == ""; }).css('dosomething');

【讨论】：

【解决方案5】：

$('textarea:empty') 是一种很好的方法，但是由于我正在处理文本区域，其内容可能会不断变化并且在某一点为空而下一个非空，这仍然需要在用户每次关注时检查并离开文本区域。

我最终在我的 textarea 中添加了一个类 .empty，并在每次触发 .focusout 时检查它的值：

$('textarea').focusout(function() {
  if ($(this).val() == '') { $(this).addClass('empty'); }
  else { $(this).removeClass('empty'); }
  });

这样我可以在我的样式表中保留样式，并且即使在用户输入了某些内容并决定将其全部删除之后，.empty 定义的规则也可以使用。

【讨论】：