Why is a transition property on the placeholder pseudoelement valid in Chrome?

Question

I was goofing around with the ::placeholder pseudoelement on Codepen (Chrome 59.0.3071) when I noticed something odd. (please see my JSFiddle)

In brief, this CSS should not enable a transition of the ::placeholder color over 2s:

input::placeholder {color:red;transition:2s;}
input:hover::placeholder {color:green}

Using Firefox, there is no color transition over a 2 second interval on hover (this appears to be correct according to this section of a W3C spec and this section of a different one - follow the thread to the ::first-line pseudo-element), but instead there is an immediate color transition to green;

However, the same JSFiddle using Chrome does show a ::placeholder color transition over a period of 2 seconds, which according to the specs, appears to be incorrect.

Is this a bug in this version of Chrome (and if so, is it being addressed?) or is this an indictment of my lack of understanding of CSS?

Pruter

jsfiddle.net/09gc1wvd I was able to get FF 54 to do transitions using brackets rather than ::, so maybe the specs are wrong? – Mousse

@SamuelCook these are completely different things! With brackets notation, you select the originating element, not a pseudo element. The selector input:hover[placeholder] means "the input element that is hovered and has a placeholder attribute". So your example doesn't prove that the specs are wrong w.r.t. placeholder pseudo element (although they probably are:). – Crissman

Interestingly, the spec claims ::placeholder has all the properties of ::first-line, but when you do the same experiment on ::first-line, both FF and Chrome have no transition. See this fiddle and observe the difference. Reading the spec carefully, it is unclear to me whether the set of ::placeholder properties is a superset of the ::first-line properties or exactly equal. – Bellied

@Auroratide, though it may not be the "Accepted Answer", this comment IMO is worth being an Answer – Pruter

Answer 1

Currently, it seems that Gecko's and Webkit's implementations are very similar. The set of allowed rules are slightly different and the default styling isn't the same but those are clearly solvable issues.

-- From http://lists.w3.org/Archives/Public/www-style/2013Jan/0283.html

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

-- From https://developer.mozilla.org/en/docs/Web/CSS/::-moz-placeholder

Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.

-- From https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

But apparently both Chrome and Firefox apply no transitions for ::first-line, as is evident through this JSfiddle I made.

Also while I was searching on the net for answers, I found that the transition property for ::placeholder was working in an older version of Firefox with vendor prefixes which simply reconfirms the line from spec,

behaviour may change in the future.

Here's the code for the JSfiddle.

input::-webkit-input-placeholder {
  color: red;
  transition: 2s;
}

input:hover::-webkit-input-placeholder {
  color: green
}

p::first-line {
  color: red;
  transition: 2s;
}

p:hover::first-line {
  color: green
}

<input placeholder="Sup">
<br />

<p style="display:inline-block">This is the first line.</br> Check it out</p>

Lello

Answer 2

I couldn't find it in the w3c docs. It looks like it used to work in some older Firefox versions.

A workaround with css could be:

input[placeholder]{color:red; transition:color 2.1s;}
input:focus[placeholder]{color:blue}

Which works in Chrome and Firefox.

Inundate

I don't understand what you're trying to convey here. The question cites the latest version of the spec as saying that transitions only apply to ::before and ::after pseudo-elements, not the ::placeholder pseudo-element, and the older draft that you cite - and I don't know why you've chosen an older draft - also says that it only applies to elements and ":before and :after pseudo elements". You seem to be trying to disprove the claim in the question, but the source you cite confirms that it has been, in fact, this way for much longer. – Vegetation

You're actually right, I misread the documentation. I will edit my answer, leave the workaround here. – Inundate

The workaround is to simply not specify transitions on the ::placeholder pseudo-element. But that's not what the question is asking. – Vegetation