Can a ::before selector be used with a <textarea>?

Question

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.

Roark

Do you mean :before and :after? And, they work fine here; what are you trying to accomplish? Are you hitting browser-specific issues? – Chokebore

Yes, thats what I meant. And I don't think its anything browser specific. I'm taking some ideas from nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html and everything was working with your standard block-level elements but not when applied to a textarea. – Roark

Not working for me in Chrome and Firefox. textarea::after{ content: "some text" } does not work but form::after{ content: "some text" } does work. Please note that the double colon style is CSS3 syntax but the single colon is CSS2 syntax. Neither work on textarea. – Rearrange

It seems Opera (the browser I use) is the odd man out, as it uses textarea's :after content. All I can see in the CSS2 spec on this issue is "Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification." In other words, this may be implementation-defined behaviour. – Chokebore

Answer 1

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.

Vicegerent

Thanks for this, was looking for a long time why :before and :after doesn't work with img tags! – Godfree

Answer 2

For those who are looking for a workaround, you can use contenteditable attribute to div. Be aware there are downsides when using this method.

#console {
  border: 1px solid black;
}

#console::before {
  content: ">>>";
}

<div id="console" contenteditable>Click me to edit content.</div>

Example JSFiddle

See https://mcmap.net/q/267609/-is-it-possible-to-have-several-different-textcolors-in-one-textarea.

Elongate

Answer 3

<div class='tx-div-before'></div>

use this before textarea and

<div class='tx-div-after'></div> 

use this code after textarea. and add before and after psedu element.

Howlond

When adding an answer to a ten year old question with an accepted answer it is important to point out what new aspect of the question you are addressing. With technologies that may have changed over that 10 years it is also important to note if those changes change the answer. – Envenom

Answer 4

Actually, you can add content with :after on an input element. This will add a sort of tip when the element is in its active state:

#gallery_name {
   position:relative;
}
#gallery_name:focus:after {
   content: "Max Characters: 30";
   color: #FFF;
   position: absolute;
   right: -150px;
   top:0px;
}

<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">

Tamatamable