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

Question

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

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;
}

我该如何解决这个问题？

Answer 1

您需要一个块容器才能使用 ::first-letter 伪元素：

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

还有你的CSS：

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

Answer 2

文本区域不能有 ::first-letter 伪元素。只有块容器可以有这样的伪元素，但由于文本区域的性质，它不能是块容器，因此你不能用 CSS.

来模拟这种行为

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

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

Css ::first-letter on textarea does not work

html

css

textarea

pseudo-element