[css-flexbox][css-pseudo] placeholder pseudo-element fails to be flex item

[vwkd]

I know the ::placeholder pseudo-element is probably the least of your concerns. But I use it quite often. Recently I tried to align a ::placeholder pseudo-element using Flexbox, which seemed like a basic task. Yet this didn't work. I was forced to return to the ugly old hacks using text-align and line-height to match the element height (or would have had otherwise to resort to absolute positioning).

I couldn't find anything in the Flexbox spec as to why Flexbox wouldn't apply to the ::placeholder pseudo-element of <input> and <textarea> elements. After all, it applies to ::before and ::after pseudo-elements just fine. Yet in none of the latest versions of Chrome, Firefox and Safari does the ::placeholder pseudo-element behave as a flex item.

The Pseudo-Element spec does mention

::placeholder specifically selects a pseudo-element representing the placeholder text, and is thus relatively limited in its abilities.

but it is nowhere elaborated, what this "limited in its abilities" means. It seems like a waver that could be translated to "Dear Mr. Browser, do whatever the hell you want!".

At least to me, Flexbox layout should be one of the basic properties of every element that is visible on the screen. This includes the ::before and ::after pseudo-elements (working!) as well as the ::placeholder element (not working!). Ideally, this would also apply to Grid layout, but this is a topic for another issue.

It seems to me there are two possibilities:

• Either, this is desired by the spec authors. Then it's a cross-browser bug, with bugs needing to be filed for each browser to implement it.
• Or, this isn't desired by the spec authors. Then it's a spec bug, with an issue here needing to be filed to clarify it.

What is the CSS WG's position on this? Is there a path to make ::placeholder work with Flexbox?

---

Example of alignment of ::placeholder pseudo-element that currently is not working.

textarea {
  height: 10rem;
  display: flex;
  /* should align placeholder center center */
  align-items: center;
  justify-content: center;
}

input {
  height: 10rem;
  display: flex;
  /* should align placeholder top center */
  align-items: flex-start;
  justify-content: center;
}

<textarea placeholder="Some text"></textarea>

<input placeholder="Some text" />

[tabatkins]

but it is nowhere elaborated, what this "limited in its abilities" means. It seems like a waver that could be translated to "Dear Mr. Browser, do whatever the hell you want!".

That phrase only appears in a note explaining the feature; it's not normative text anyway. The elaboration you're looking for is in the very next sentence following the note:

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.

Like ::first-line, ::placeholder only styles the placeholder text itself; it can't style the text's surrounding box, because the interior of an input is hidden from CSS. This means layout properties like Flexbox can't be applied to it, just text styling like color or alignment.

Making the ::placeholder capable of taking all properties, like ::before does, would require us to specify precisely what the interior layout structure of an input is, and CSS has traditionally purposely avoided that, to allow UAs flexibility in how they implement and display form elements to the user.