为什么不'；我的CSS文本颜色转换对Firefox中的输入元素占位符有效吗？

是否可以对Firefox

占位符

元素的文本颜色应用转换

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

任何帮助都将不胜感激

现场演示：

：：-webkit输入占位符{颜色：继承；不透明度：1；字体重量：正常！重要；-webkit转换：颜色0.3s；转换：颜色0.3s；/*webkit*/}
：-moz占位符{颜色：继承；不透明度：1；字体重量：正常！重要；-moz转换：颜色0.3s；转换：颜色0.3s；/*Firefox 4到18*/}
：-moz占位符{颜色：继承；不透明度：1；字体重量：正常！重要；-moz转换：颜色0.3s；转换：颜色0.3s；/*Firefox 19+*/}
：-ms输入占位符{颜色：继承；不透明度：1；字体重量：正常！重要；-ms转换：颜色0.3s；转换：颜色0.3s；/*Internet Explorer 10+*/}
：焦点：：-webkit输入占位符{颜色：rgb（80%，80%，80%）；/*webkit*/}
：focus:-moz占位符{color:rgb（80%，80%，80%）；/*firefox4到18*/}
：焦点：：-moz占位符{颜色：rgb（80%，80%，80%）；/*Firefox 19+*/}
：焦点：-ms输入占位符{颜色：rgb（80%，80%，80%）；/*Internet Explorer 10+*/}
输入{宽度：100%；显示：bock；字体大小：18pt；}

我不知道我们是否可以使用

：将注意力集中在占位符上，但无论如何，他不在合适的位置

为了尊重CSS，它是everytime
element:pseudo-element
，所以您必须这样编写它

：-webkit占位符：焦点{…}

之后，rgb颜色是0到255（int），而不是百分比（我从未尝试过，但这可能是你的问题）
我想说不。即使你在当前的firefox版本上使用它，这种功能也可能会有重大的跨平台问题。你可以做一个psuedo占位符。通过实际操作该值并添加一个类（无论是否为其占位符），但这需要一些javascript。在chrome中对我有效，我只是认为它没有得到很好的支持
<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." >