css - 为什么我的 CSS 文本颜色转换不适用于 Firefox 中的输入元素占位符？

Question

是否可以对 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." >

Answer 1

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

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

::-webkit-placeholder:焦点{...}

之后，rgb 颜色是 0 到 255(int)，而不是百分比(我从来没有尝试过，但这可能是你的问题)