Can a ::before selector be used with a <textarea>?
The :before
and :after
will not work on a text-area
(nor any element that cannot contain another element, such as img
or input
), because the generated content of the pseudo-element gets placed within the element but before or after that element's content, and acts itself as an element. The pseudo-element does not get placed before or after the parent element itself (contrary to some information one may find on the internet). To illustrate:
If you have this css:
p:before {content: 'before--'}
p:after {content: '--after'}
Then html like this:
<p>Original Content</p>
Effectively renders to the screen as if the source code were:
<p>before--Original Content--after</p>
Not as if the source code were:
before--<p>Original Content</p>--after
Which is why tags that cannot contain any html element "content" (like those mentioned above) do not recognize the pseudo-elements, as there is no "place" for that content to be generated to. The textarea
can contain "content," but only pure text content.
xj9
Updated on July 09, 2022Comments
-
xj9 almost 2 years
I'm experimenting with some styles on
<textarea>
s and I tried doing some stuff with::before
and::after
selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work.