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

3 Answers 3

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/>