Css ::first-letter on textarea does not work

Question

I want to make every first letter typed in a textarea be uppercase. But when I try this code, it doesn't work:

HTML

<textarea name="content" rows="18" placeholder="Your Message"
          title="Give Your Advice To Us" wrap="soft"></textarea>

CSS

textarea::first-letter {
  text-transform: uppercase;
}

How can I fix this?

Answer 1

A textarea cannot have a ::first-letter pseudo-element. Only a block container can have such a pseudo-element, but due to its nature a textarea cannot be a block container and therefore you can't emulate this behavior with CSS.

Applying text transforms to form fields is generally never a good idea anyway. You're only changing the appearance of the text input — the text that actually gets submitted isn't going to have the transform applied to it. If you really want the text to always start with a capital letter, validate it on the server side, or just enforce it with JavaScript. How you do that is outside the scope of this question since it depends entirely on your use case but I'm sure you can find another question that meets your needs.

Answer 2

You need a block container in order to use the ::first-letter pseudo-element:

<p>
    <textarea name="content" rows="18" placeholder="Your Message"
              title="Give Your Advice To Us" wrap="soft"></textarea>
</p>

And your CSS:

p::first-letter {
  text-transform: uppercase;
}