Firefox：过渡占位符不透明度答案

【问题标题】：Firefox: Transition placeholder opacityFirefox：过渡占位符不透明度
【发布时间】：2013-04-29 05:07:52
【问题描述】：

我想使用转换使输入占位符在焦点上平滑淡出，但无法让它在 FF 中工作。

<input type="text" placeholder="some cool text"/>

input:focus::-moz-placeholder {
    opacity: 0.1;
}
input::-moz-placeholder {
    opacity: 1;
    transition: opacity 1s;
}
input::-moz-placeholder {
    opacity: 1;
}
input:focus::-webkit-input-placeholder {
     opacity: 0.1;
}

Fiddle

在 Chrome 中运行良好，但在 FF 中不行。占位符按预期更改焦点上的不透明度，但不会出现 1s 过渡。它也绝对不能在 IE 中工作

编辑：显然这是最新版本 FF (20.0.1) 中的错误

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

这样做怎么样？不要使用opacity，而是切换色调

Demo

<input type="text" placeholder="some cool text"/>

input[type=text]:-moz-placeholder {
color: #000;
transition: color 1s;
}

input[type=text]:focus:-moz-placeholder {
    color: #aaa;
}

input[type=text]::-webkit-input-placeholder {
    color: #000;
    transition: color 1s;
}

input[type=text]:focus::-webkit-input-placeholder {
    color: #aaa;
}

当然，如果您愿意，您可以使用opacity，但您可以自己查看结果并决定什么更适合您，opacity demo

注意：使用::-moz-placeholder支持+19版本

【讨论】：

@btevfik 只需添加你想要的专有属性，我更新了，问题集中在firefox 但无论如何我也添加了 webkit 支持
实际上这在 Firefox 中也不起作用。我才意识到他是在Firefox上问的。但他发布的内容也不适用于 chrome。我的回答也不适用于 ff。
嗯。 idk 怎么回事。如果这有什么不同，我正在 Mac 上进行测试。
@btevfik 要支持firefox +19，需要使用:: 即::-moz-placeholder
@skyisred 这对你有用吗？ jsfiddle.net/de9aE/17 用于颜色，jsfiddle.net/de9aE/18 用于不透明度

【解决方案2】：

任何浏览器都不应该支持 ::placeholder 上的转换，因为它没有由规范定义，因此可以被视为非标准行为。 Firefox 不支持它的事实是正确的行为：

https://bugzilla.mozilla.org/show_bug.cgi?id=1115623

根据规范，只有 ::after 和 ::before 伪元素启用了转换属性。所有其他伪元素都没有。

【讨论】：