Html Css:：textarea上的第一个字母不起作用

我想让文本区域中输入的第一个字母都是大写的。但当我尝试此代码时，它不起作用：

HTML

---

如何修复此问题？

您需要一个块容器才能使用

：：第一个字母

伪元素：

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

---

要使用

：：第一个字母

伪元素，您需要一个块容器：

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

---

textarea不能有

：：第一个字母

伪元素。只有块容器可以有这样的伪元素，但由于其性质，textarea不能是块容器，因此不能用CSS模拟这种行为

---

无论如何，将文本转换应用于表单字段通常都不是一个好主意。您只需更改文本输入的外观-实际提交的文本不会应用转换。如果您真的希望文本总是以大写字母开头，请在服务器端验证它，或者使用JavaScript强制执行它。如何做到这一点超出了这个问题的范围，因为这完全取决于您的用例，但我相信您可以找到另一个满足您需要的问题。

文本区域不能有

：：第一个字母
伪元素。只有块容器可以有这样的伪元素，但由于其性质，textarea不能是块容器，因此不能用CSS模拟这种行为

无论如何，将文本转换应用于表单字段通常都不是一个好主意。您只需更改文本输入的外观-实际提交的文本不会应用转换。如果您真的希望文本总是以大写字母开头，请在服务器端验证它，或者使用JavaScript强制执行它。如何做到这一点超出了这个问题的范围，因为这完全取决于您的用例，但我相信您可以找到另一个满足您需要的问题。
您确实意识到，只有textarea的p没有第一个字母，对吗？关于块容器的理论是正确的，但是您的代码在问题的上下文中没有意义，因此该理论变得毫无意义。正如@BoltClock所指出的，这根本不起作用。我插入了这段代码，并在Chrome、Firefox和Safari中进行了尝试。CSS规则对它们中的任何一个都不起作用。你知道只有textarea的p没有第一个字母，对吗？关于块容器的理论是正确的，但是您的代码在问题的上下文中没有意义，因此该理论变得毫无意义。正如@BoltClock所指出的，这根本不起作用。我插入了这段代码，并在Chrome、Firefox和Safari中进行了尝试。CSS规则对它们中的任何一个都不起作用。我已经有答案了。它是基于Gangai Johann和Alexander的答案。谢谢你，兄弟！！哈伊。我已经有答案了。它是基于Gangai Johann和Alexander的答案。谢谢你，兄弟！！
<p>
    <textarea name="content" rows="18" placeholder="Your Message"
              title="Give Your Advice To Us" wrap="soft"></textarea>
</p>

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