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

Question

我想讓 textarea 中輸入的每個第一個字母都大寫。 但是當我嘗試這段代碼時，它不起作用：

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

textarea 不能有::first-letter偽元素。 只有塊容器可以有這樣的偽元素，但由於它的性質，textarea 不能是塊容器，因此你不能用 CSS 模擬這種行為。

無論如何，將文本轉換應用於表單字段通常從來都不是一個好主意。 您只是在更改文本輸入的外觀 — 實際提交的文本不會對其應用轉換。 如果您確實希望文本始終以大寫字母開頭，請在服務器端對其進行驗證，或者僅使用 JavaScript 強制執行。 你如何做到這一點超出了這個問題的范圍，因為它完全取決於你的用例，但我相信你可以找到另一個滿足你需求的問題。

Answer 2

您需要一個塊容器才能使用::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;
}