Question

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

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

任何帮助都将不胜感激。

<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：focus {...}

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

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

1 个答案: