Why is a transition property on the placeholder ps

问题:

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?

回答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>

回答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.