Why the first letter of the `textarea` and `input` elements are not red?

Question

Google Chrome 58.0.3029.110 (x64), Firefox 53.0.2 (x64), Linux

Why the first letter of the textarea element is not red?

The textarea::first-line works fine (in my Google Chrome, but not in Firefox) but the textarea::first-letter doesn' work in my example. I have the similar behaviour for an input element too.

I haven't problems with both cases if I use p instead of textarea or 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' />

[Can I Use](http://caniuse.com/#feat=css-first-letter) already refers to [this bug](https://bugs.webkit.org/show_bug.cgi?id=6185). This must answer your question. — Al.G., May 16 '17 at 20:09
@Al.G. I'm not sure it does. That bug says that the first character is not selectable (i.e., selecting all of the text in the textarea doesn't select the first character). This is saying the first character's style is not applied. — Heretic Monkey, May 16 '17 at 20:12
Possible duplicate of [Select first letter of input value and change it's color via CSS](http://stackoverflow.com/questions/18397450/select-first-letter-of-input-value-and-change-its-color-via-css) — rlemon, May 16 '17 at 20:19

Achraf JEDAY · Accepted Answer · 2017-05-16T22:42:21.533

For the ::first-letter pseudo-element to work you need to set your element's display property to block and use a block level container:

In CSS, the ::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.

The ::first-letter pseudo-element can be used with all such elements that contain text, or that have a descendant in the same flow that contains text.

From 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>

Why the first letter of the `textarea` and `input` elements are not red?

1 Answers1