为什么我的 CSS 文本颜色过渡不适用于 Firefox 中的输入元素占位符？答案

【问题标题】：Why don't my CSS text color transitions work on input element placeholders in Firefox?为什么我的 CSS 文本颜色过渡不适用于 Firefox 中的输入元素占位符？
【发布时间】：2013-08-13 06:32:54
【问题描述】：

是否可以对 Firefox placeholder 元素的文本颜色应用过渡？

此代码在 webkit 浏览器上产生了很好的淡入淡出效果，但只是将占位符文本从黑色更改为灰色，而在 Firefox 上没有过渡。（在 v22 和 v23 上测试。）

任何帮助将不胜感激。

现场演示：http://jsfiddle.net/H3J9t/

<style>

::-webkit-input-placeholder { color: inherit; opacity: 1; font-weight: normal !important; -webkit-transition: color 0.3s; transition: color 0.3s; /* WebKit */ }
:-moz-placeholder { color: inherit; opacity: 1; font-weight: normal !important; -moz-transition: color 0.3s; transition: color 0.3s; /* Firefox 4 to 18 */ }
::-moz-placeholder { color: inherit; opacity: 1; font-weight: normal !important; -moz-transition: color 0.3s; transition: color 0.3s; /* Firefox 19+ */ }
:-ms-input-placeholder { color: inherit; opacity: 1; font-weight: normal !important; -ms-transition: color 0.3s; transition: color 0.3s; /* Internet Explorer 10+ */ }

:focus::-webkit-input-placeholder { color: rgb(80%, 80%, 80%); /* WebKit */ }
:focus:-moz-placeholder { color: rgb(80%, 80%, 80%); /* Firefox 4 to 18 */ }
:focus::-moz-placeholder { color: rgb(80%, 80%, 80%); /* Firefox 19+ */ }
:focus:-ms-input-placeholder { color: rgb(80%, 80%, 80%); /* Internet Explorer 10+ */ }

input { width: 100%; display: bock; font-size: 18pt; }

</style>

<input width="100%" placeholder="The color should change on focus, but it should be a 300ms transition, not a jarring change." >

【问题讨论】：

我想说不。即使你让它在当前的 Firefox 版本上工作，这种功能也可能会出现重大的跨平台问题。你可以做一个伪占位符。通过实际操作值并添加一个类（如果它的占位符），但这需要一些 javascript。
在 chrome 中为我工作，我只是觉得它不是很好的支持

标签： css firefox css-transitions transition

【解决方案1】：

我不知道我们是否可以在占位符上使用:focus，但无论如何，他不是在好地方。

为了尊重 CSS，它每次都是 element:pseudo-element，所以你必须这样写

::-webkit-placeholder:focus {...}

之后，rgb 颜色是 0 到 255 (int)，而不是百分比（我从未尝试过，但这可能是您的问题）

【讨论】：