html - 为什么 `textarea`和 `input`元素的首字母不是红色的？

Question

谷歌浏览器 58.0.3029.110 (x64)、Firefox 53.0.2 (x64)、Linux

为什么textarea元素的第一个字母不是红色的？

textarea::first-line 工作正常(在我的 Google Chrome 中，但在 Firefox 中不行)但是 textarea::first-letter 在我的中不起作用例子。我对 input 元素也有类似的行为。

如果我使用 p 而不是 textarea 或 input，我在这两种情况下都没有问题。

input::first-line,
textarea::first-line {
  color: green;
}

input::first-letter,
textarea::first-letter {
  color: red;
}

<textarea cols='40' rows='4'>Sfrrr sdfsdfsd dsf ddsfds fds fdsfds fsdfds fsdfdsf sd fdss d dsf ssdfddfsddsfdssdsf ss dfsds sdf sdf sdfs fsf sf sdfsdfsdfs df sdffsdf sf sdf sdf sf sf sdf sdf sdf sdf sf sdf sdf sf sdf sdf sdf sfsdfsdf sdf sdf sdfs sdf sdfds dsf sdf sdf sdfsdf sdf dsfs</textarea>
<input value='Sfrrr sdfsdfsd dsf ddsfds fds fdsfds fsdfds' />

Answer 1

要使 ::first-letter 伪元素起作用，您需要将元素的显示属性设置为 block 并使用 block 级容器:

在 CSS 中，::first-letter 伪元素适用于类似 block 的容器，例如 block、list-item、table-cell、table-caption 和 inline-block 元素。

::first-letter 伪元素可用于所有此类包含文本的元素，或在包含文本的同一流中具有后代的元素。

来自 https://www.w3.org/TR/css3-selectors/#first-letter

textarea, input {
  display: block;
}

input::first-line,
textarea::first-line {
  color: green;
}

p::first-letter {
  color: red;
}

<p><textarea cols='40' rows='4'>Sfrrr sdfsdfsd dsf ddsfds fds fdsfds fsdfds fsdfdsf sd fdss d dsf ssdfddfsddsfdssdsf ss dfsds sdf sdf sdfs fsf sf sdfsdfsdfs df sdffsdf sf sdf sdf sf sf sdf sdf sdf sdf sf sdf sdf sf sdf sdf sdf sfsdfsdf sdf sdf sdfs sdf sdfds dsf sdf sdf sdfsdf sdf dsfs</textarea></p>
<p><input value='Sfrrr sdfsdfsd dsf ddsfds fds fdsfds fsdfds' /></p>