3

トランジションを使用して入力プレースホルダーをフォーカス時にスムーズにフェードさせたいと思っていましたが、FF では機能しません。

<input type="text" placeholder="some cool text"/>

input:focus::-moz-placeholder {
    opacity: 0.1;
}
input::-moz-placeholder {
    opacity: 1;
    transition: opacity 1s;
}
input::-moz-placeholder {
    opacity: 1;
}
input:focus::-webkit-input-placeholder {
     opacity: 0.1;
}

フィドル

Chrome では正常に動作しますが、FF では動作しません。プレースホルダーはフォーカス時に意図したとおりに不透明度を変更しますが、1 のトランジションは表示されません。また、IEでは確実に機能しません

編集：どうやらFFの最新バージョン（20.0.1）のバグです

4

2 に答える 2

2

このようにしたらどうですか？を使用する代わりにopacity、色合いを切り替えます

デモ

<input type="text" placeholder="some cool text"/>

input[type=text]:-moz-placeholder {
color: #000;
transition: color 1s;
}

input[type=text]:focus:-moz-placeholder {
    color: #aaa;
}

input[type=text]::-webkit-input-placeholder {
    color: #000;
    transition: color 1s;
}

input[type=text]:focus::-webkit-input-placeholder {
    color: #aaa;
}

確かに、必要に応じて使用できopacityますが、結果を自分で見て、自分にとって何が良いかを判断できます。不透明度のデモ

注: ::-moz-placeholder+19 Ver をサポートするために使用します。

于 2013-05-05T06:14:28.033 に答える
1

::placeholder での遷移は、仕様で定義されていないため、どのブラウザーでもサポートされるべきではありません。そのため、非標準の動作と見なすことができます。Firefox がサポートしていないという事実は正しい動作です:

https://bugzilla.mozilla.org/show_bug.cgi?id=1115623

仕様により、::after および ::before 疑似要素のみが遷移プロパティを有効にします。他のすべての疑似要素はそうではありません。

詳細:プレースホルダー疑似要素の遷移プロパティが Chrome で有効なのはなぜですか?

于 2019-07-08T13:37:30.617 に答える