2

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

这段代码在 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." >
4

1 回答 1

1

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

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

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

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

于 2013-11-05T09:55:32.567 回答