3

我想使用转换使输入占位符在焦点上平滑地淡出，但无法让它在 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;
}

小提琴

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

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

4

2 回答 2

2

这样做怎么样？而不是使用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 Ver

于 2013-05-05T06:14:28.033 回答
1

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

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

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

这里还有更多：为什么占位符伪元素上的转换属性在 Chrome 中有效？

于 2019-07-08T13:37:30.617 回答