placeholderFirefox要素のテキストの色にトランジションを適用することはできますか?
このコードは、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." >