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

Question

我想问一下关于CSS的事情。我想让textarea上的每个首字母类型都是大写的。但是，当我尝试代码时，它无法正常工作。任何的想法？

HTML

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

CSS

main.containernya form 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 ..：

main.containernya form p::first-letter {
  text-transform: uppercase;
}

祝你好运！

Answer 2

textarea不能有::first-letter伪元素。只有块容器可以有这样的伪元素，但由于其性质，textarea不能是块容器，因此您无法使用CSS模拟此行为。

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