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?

https://jsfiddle.net/09gc1wvd/ I was able to get FF 54 to do transitions using brackets rather than `::`, so maybe the specs are wrong? — Samuel Cook, Jul 21 '17 at 20:59
@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:). — Ilya Streltsyn, Jul 26 '17 at 15:06
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](https://jsfiddle.net/Auroratide/fr017m9L/1/) 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. — Auroratide, Jul 27 '17 at 02:15
@Auroratide, though it may not be the "Accepted Answer", this comment IMO is worth being an Answer — The One and Only ChemistryBlob, Jul 27 '17 at 14:08

score 4 · Answer 1 · edited Aug 01 '17 at 07:12

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>

Benidorm · Answer 2 · 2017-07-27T09:53:16.120

0

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.

edited Jul 27 '17 at 09:53

answered Jul 27 '17 at 08:08

Benidorm

183
1
1
11

1

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. – BoltClock Jul 27 '17 at 08:11
You're actually right, I misread the documentation. I will edit my answer, leave the workaround here. – Benidorm Jul 27 '17 at 09:20
The workaround is to simply not specify transitions on the ::placeholder pseudo-element. But that's not what the question is asking. – BoltClock Jul 27 '17 at 10:07

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

2 Answers2

Linked