为什么占位符伪元素上的转换属性在 Chrome 中有效？答案

【问题标题】：Why is a transition property on the placeholder pseudoelement valid in Chrome?为什么占位符伪元素上的转换属性在 Chrome 中有效？
【发布时间】：2017-12-28 00:20:46
【问题描述】：

我在 Codepen (Chrome 59.0.3071) 上玩弄 ::placeholder 伪元素时发现了一些奇怪的东西。（请看我的JSFiddle）

简而言之，此 CSS 不应启用 ::placeholder 颜色超过 2 秒的过渡：

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

使用 Firefox，悬停时在 2 秒间隔内没有颜色过渡（根据 W3C 规范的 this section 和不同规范的 this section，这似乎是正确的 - 跟随线程到 ::first-line伪元素），而是立即将颜色转换为绿色；

但是，使用 Chrome 的同一 JSFiddle确实在 2 秒内显示::placeholder 颜色转换，根据规范，这似乎是不正确的。

这是该版本 Chrome 中的错误（如果是，是否已解决？）还是对我对 CSS 缺乏了解的控诉？

【问题讨论】：

jsfiddle.net/09gc1wvd 我能够让 FF 54 使用括号而不是 :: 进行转换，所以也许规格有误？
@SamuelCook 这些是完全不同的东西！使用括号表示法，您可以选择原始元素，而不是伪元素。选择器input:hover[placeholder] 表示“悬停在和上的input 元素具有placeholder 属性”。所以你的例子并不能证明规格是错误的。 占位符伪元素（尽管它们可能是：）。
有趣的是，规范声称::placeholder 具有::first-line 的所有属性，但是当您对::first-line 进行相同的实验时，FF 和Chrome 都没有过渡。请参阅this fiddle 并观察差异。仔细阅读规范，我不清楚::placeholder 属性集是::first-line 属性的超集还是完全相等。
@Auroratide，虽然它可能不是“公认的答案”，但这条评论 IMO 值得成为一个答案

标签： css css-transitions placeholder

【解决方案1】：

我在 w3c 文档中找不到它。看起来它曾经在一些较旧的 Firefox 版本中工作。

使用 css 的解决方法可能是：

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

适用于 Chrome 和 Firefox。

【讨论】：

我不明白你想在这里表达什么。该问题引用了规范的最新版本，说转换仅适用于 ::before 和 ::after 伪元素，而不是 ::placeholder 伪元素，以及您引用的旧草案 - 我不知道为什么你选择了旧的草稿 - 也说它只适用于元素和“:before 和 :after 伪元素”。您似乎试图反驳问题中的说法，但您引用的来源确认事实上，这种方式已经存在了很长时间。
你说得对，我误读了文档。我将编辑我的答案，将解决方法留在这里。
解决方法是简单地不在 ::placeholder 伪元素上指定转换。但这不是问题要问的。

【解决方案2】：

目前看来，Gecko 和 Webkit 的实现都非常相似的。允许的规则集略有不同，并且默认样式不一样，但这些显然是可以解决的问题。

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

非标准此功能是非标准的，不在标准中追踪。不要在面向 Web 的生产站点上使用它：它不会为每个用户工作。之间也可能存在很大的不兼容未来的实现和行为可能会发生变化。

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

仅适用于::first-line 的 CSS 属性子集伪元素可以在使用::placeholder 的规则中使用选择器。

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

但显然 Chrome 和 Firefox 都没有为 ::first-line 应用任何转换，正如我所做的 this JSfiddle 所证明的那样。

当我在网上搜索答案时，我发现 ::placeholder 的 transition 属性在旧版本的 Firefox 中工作，带有供应商前缀，这只是重新确认规范中的行，

行为可能会在未来发生变化。

这是 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>

【讨论】：