【问题标题】:Css ::first-letter on textarea does not workcss :: first-letter on textarea 不起作用
【发布时间】:2018-06-06 03:13:23
【问题描述】:

我想让在 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;
}

我该如何解决这个问题?

【问题讨论】:

    标签: html css textarea pseudo-element


    【解决方案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;
    }
    

    【讨论】:

    • 您确实意识到只有 textarea 的 p 没有第一个字母,对吧?关于块容器的理论是正确的,但是您的代码在问题的上下文中没有意义,因此该理论变得毫无意义。
    • 正如@BoltClock 所说,这根本行不通。我将这段代码放在a JSFiddle 中,并在 Chrome、Firefox 和 Safari 中进行了尝试。 CSS 规则对其中任何一个都不起作用。
    【解决方案2】:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-05-21
      • 2020-01-14
      • 1970-01-01
      • 1970-01-01
      • 2016-06-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多