是否可以将 CSS 选择器用于 textarea 值？答案

【问题标题】：Is it possible to use CSS selector for textarea value?是否可以将 CSS 选择器用于 textarea 值？
【发布时间】：2021-03-01 04:20:00
【问题描述】：

我知道如何在 JavaScript/jQuery 中做到这一点，但我想知道是否有办法在 CSS 中做到这一点？

我知道我们可以使用以下方法定位包含字符串的占位符：

textarea[placeholder*="WORK"]{
    background: purple;
}

值有类似的吗？

我尝试了textarea[value*="MY_STRING"]，但这可能不起作用，因为 textarea 的值与input 不同，它不是属性。

【问题讨论】：

【解决方案1】：

不，因为 textarea 目前只支持以下属性：

autocapitalize 
autocomplete
autocorrect 
autofocus
cols
form
maxlength
minlength
placeholder
readonly
required
rows
spellcheck
wrap

即没有基于用户所做的事情

【讨论】：

【解决方案2】：

我什么都没有。但是，如果您真的想使用 textarea 中的值，则可能需要通过添加 data-info 属性并使文本与值相似来复制信息。然后使用data属性选择具体的textarea。这不是一个好方法，但只是认为它可能会有所帮助

<textarea data-info="My String">My String</textarea>

css可能是这样的

textarea[data-info="My String"]{ ....}

同样，这不是最好的方法。

【讨论】：

这其实是个好主意。可以在 textarea 上设置oninput 处理程序，将data-info 修改为this.dataset.info=this.value;，它可以在没有任何外部JS 的情况下工作。 CSS 还可以使用*= 代替= 来实现contains 行为。

【解决方案3】：

您可以为此使用<input> 元素，方法是给它一个模式并使其成为必需，然后使用CSS :valid 伪类。这不适用于<textarea>，因为它不支持模式属性。

input:valid{
    background-color: purple;
}

&lt;input type="text" pattern="^.*MY_STRING.*$" required/&gt;

【讨论】：