javascript - Is it possible to use CSS selector for textarea value? - Stack Overflow

admin管理员组

文章数量:1327337

I know how to do this in JavaScript/jQuery but I am wondering if there's a way to do this in CSS?

I know we can target the placeholder containing a string using:

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

Is there something similar for the value?

I tried textarea[value*="MY_STRING"] but that didn't work probably because the value of the textarea is not an attribute unlike input.

I know how to do this in JavaScript/jQuery but I am wondering if there's a way to do this in CSS?

I know we can target the placeholder containing a string using:

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

Is there something similar for the value?

I tried textarea[value*="MY_STRING"] but that didn't work probably because the value of the textarea is not an attribute unlike input.

• javascript
• html
• css

Share Improve this question Follow edited Mar 1, 2021 at 4:44 Unmitigated 89.5k1212 gold badges9696 silver badges103103 bronze badges asked Mar 1, 2021 at 4:20 sudoExclamationExclamationsudoExclamationExclamation 8,8161010 gold badges5151 silver badges119119 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

No, as textarea currently only supports the following attributes:

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

https://developer.mozilla/en-US/docs/Web/HTML/Element/textarea#attributes

i.e nothing based off what the user does

I havent got anything. But if you really want to use the value in the textarea you will have to duplicate the info perhaps by adding a data-info attribute and making the text similar to the value. And then use the data attribute to select the specific textarea. This is not a good way to do it but just thought it might help

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

css might be like this

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

Again this is not the best way to do it.

You could use the <input> element for this by giving it a pattern and making it required, then using the CSS :valid pseudo-class. This does not work for <textarea> because it does not support the pattern attribute.

input:valid{
    background-color: purple;
}

<input type="text" pattern="^.*MY_STRING.*$" required/>

本文标签： javascriptIs it possible to use CSS selector for textarea valueStack Overflow