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
.
3 Answers
Reset to default 5No, 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/>