Question

当我注意到奇怪的事情时，我在Codepen（Chrome 59.0.3071）上使用了public String getName() { return this.name; }伪元素。（请参阅我的JSFiddle）

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

::placeholder

使用Firefox，在悬停时2秒间隔内没有颜色转换（根据W3C规范的this section和不同的this section，这似乎是正确的 - 按照线程进行操作input::placeholder {color:red;transition:2s;} input:hover::placeholder {color:green}伪元素），但是立即将颜色转换为绿色;

但是，使用Chrome 的同一个JSFiddle 会在2秒的时间内显示::first-line颜色转换，根据规格，这似乎是不正确的。

这是这个版本的Chrome中的一个错误（如果是这样，是否正在解决？）或者这是对我对CSS缺乏了解的指控吗？

Answer 1

目前，似乎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来证明。

当我在网上搜索答案时，我发现transition的{{1}}属性在旧版本的Firefox中运行，其中包含供应商前缀，只是重新确认了规范中的行，< / p>

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

这是JSfiddle的代码。

::placeholder

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
}

Answer 2

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

css的解决方法可能是：

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

适用于Chrome和Firefox。

为什么占位符伪元素的过渡属性在Chrome中有效？

2 个答案: