8

以下のコードを参照してください。プレースホルダーのCSSはFirefox（最新バージョン）では機能しませんが、Chromeでは正常に機能します。Firefox用に修正するにはどうすればよいですか？

フィールドには複数の入力色がありますが、プレースホルダーには1つの色しかないため、moz-placeholderプロパティにクラス名を指定したくないので、すべての入力フィールドに適用されます。

HTML：

<div class="row">
    <input type="text" placeholder="some text asdf" value="" />
</div>

CSS：

::-webkit-input-placeholder { color:red; }
::-moz-placeholder { color:red; }
input:-moz-placeholder { color:red; }

.row input[type="text"]{
     color: blue;     
}

デモ： http： //jsfiddle.net/C6fjh/

4

2 に答える 2

13

場合によっては、MozillaではChromeやIEと比較して赤い色が明るく表示されます。その場合、不透明度：1も追加する必要があります。

例えば

:-moz-placeholder { color: red; opacity:1;} ::-moz-placeholder { color: red; opacity:1;}

于 2016-05-13T09:27:28.607 に答える
7

私は働いていません、それは最後のルールがFirefoxによってより具体的であると考えられているということだけです。これを試して：

::-webkit-input-placeholder { color:red; }
.row input[type="text"]::-moz-placeholder { color:red; }
.row input[type="text"]:-moz-placeholder { color:red; }

.row input[type="text"] {
     color: blue;     
}

動作するデモについては、このフィドルを参照してください。

ブラウザの違いがどこから来ているのか、どちらが「正しい」のかわかりません。タグと疑似クラスを使用した同様の実験では、FFとChromeの両方で同じ動作が示されます。要素のセレクターがより具体的である場合、どちらも疑似クラスの色を無視します（上記で提案したのと同じ変更を行うと、同じようになります（期待される） ？） ChromeとFFの両方での動作）。a:hover

于 2012-12-23T20:14:25.830 に答える