Firefox：过渡占位符不透明度

Question

Firefox：过渡占位符不透明度

3

我希望通过过渡使输入占位符在聚焦时平滑淡出，但无法在Firefox中实现。

<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;
}

代码片段

在Chrome中工作良好，但在FF中不起作用。占位符在焦点上按预期更改不透明度，但1秒的过渡效果不出现。它在IE中肯定也不起作用。

编辑：显然这是最新版FF（20.0.1）中的一个错误。

- skyisred

2个回答

1

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

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

按规范，只有 ::after 和 ::before 伪元素启用过渡属性。所有其他伪元素都不启用。

这里是更多信息：为什么在 Chrome 上占位符伪元素上的过渡属性有效？

- nickyjay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

像这样做怎么样？不要使用 opacity，而是切换颜色阴影。演示

<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，但您可以自己查看结果，并决定哪种方法更适合您，透明度演示

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