私はTwitter bootstrap CSSを使用しています。以下に、FireFoxとChromeで同じコードがどのように異なって表示されるかを示します。
これはかなり奇妙です。 Firebugによると、プレースホルダーのcssは次のように薄い灰色に設定されています。
:-moz-placeholder {
color: #999999;
}
これは、Chromeで正しく行われるため、すべての要素内のすべてのプレースホルダーに影響します。しかし、Firefoxではなぜtextareas
が正しく適用されているのに、input
が正しく適用されていないのですか?どうすればこれを修正できますか?
<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?">
<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea>
Chrome:
Firefox:
更新:
以下のコメントは私にアイデアを与えました:
Input
はtextarea
とは異なりcolor: #9999
エントリに取り消し線が引かれています。これは、何かがそれを上書きしていることを意味します。
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
color: #555555;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
margin-bottom: 9px;
padding: 4px;
}
実はこれですcolor: #555555;
。 Firebugで無効にすると、すべて機能します。どうしてChromeはこれを気にしませんが、Firefoxは気にしますか?両方のブラウザでこれを修正するためのヒントはありますか?私はまだcssに慣れていません。
この奇妙な疑似要素のために、私は少し前に少しいじくりました、結果?セレクターの間にコマを追加することはできません。ルールを2回指定する必要がありますが、それは残念です。
HTML:
<input type="text" id="test-webkit" placeholder="test-webkit" /><br />
<input type="text" id="test-moz" placeholder="test-moz" /><br />
<input type="text" id="test-both" placeholder="test-both" /><br />
<input type="text" class="test-both" placeholder="test-both-separately" />
CSS:
/* Works on Webkit */
#test-webkit::-webkit-input-placeholder {
color: red;
}
/* Works on Firefox */
#test-moz:-moz-placeholder {
color: red;
}
/* Don't work */
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder {
color: red;
}
/* Works on both */
.test-both::-webkit-input-placeholder {
color: red;
}
.test-both:-moz-placeholder {
color: red;
}
フィドル 。
問題は、Firefoxがフィールドの不透明度を変更することです。これにより、フィールドの色は異なると思いますが、そうではありません...「不透明度:1」を追加します。そしてそれはすべてのブラウザでまったく同じように動作します
input:-moz-placeholder {
color: #999999;
opacity: 1;
}
input::-moz-placeholder {
color: #999999;
opacity: 1;
}
以下の更新として、使用する必要のあるプレースホルダーの完全なリストを示します。 :-mozは新しいFirefoxバージョンでは非推奨です。
ルールを複数回指定する必要があり、1行にまとめることはできません。これは、ブラウザがそれらを単一のセレクタとして解釈するためです。 FirefoxはWebkitルールを認識していないため、エラーが発生します。
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:#bbb;
font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#bbb;
font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:#bbb;
font-family: 12px Verdana, Arial,Tahoma, sans-serif;
font: normal;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#bbb;
font: 12px Verdana, Arial,Tahoma, sans-serif;
}
Firefoxのキャッシュをクリアします(十分かもしれません)。
そしてfirebugで検査します
まだ完了していない場合はFirebugをインストールします https://addons.mozilla.org/en-US/firefox/addon/firebug/
入力を右クリックし、[Firebugで要素を検査]をクリックします。
優先度の高いcssプロパティがあるかどうかを確認します。