Question

我希望使用转换使输入占位符在焦点上平滑淡出，但无法在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）中的一个错误

Answer 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 Ver

Answer 2

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

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

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

更多：Why is a transition property on the placeholder pseudoelement valid in Chrome?

Firefox：过渡占位符不透明度

2 个答案: