web-dev-qa-db-ja.com

異なるブラウザ間でのプレースホルダーCSSの違いを解決する方法は？

私は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：

enter image description here

Firefox：

enter image description here

更新：

以下のコメントは私にアイデアを与えました：

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に慣れていません。

csstwitter-bootstrapplaceholder
12
Houman

この奇妙な疑似要素のために、私は少し前に少しいじくりました、結果？セレクターの間にコマを追加することはできません。ルールを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;
}​

フィドル 。

8
Calvein

問題は、Firefoxがフィールドの不透明度を変更することです。これにより、フィールドの色は異なると思いますが、そうではありません...「不透明度：1」を追加します。そしてそれはすべてのブラウザでまったく同じように動作します

input:-moz-placeholder {
    color: #999999;
    opacity: 1;
}

input::-moz-placeholder {
    color: #999999;
    opacity: 1;
}
9
Vinícius Moraes

以下の更新として、使用する必要のあるプレースホルダーの完全なリストを示します。 ：-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;
}
2
Hendrik

Firefoxのキャッシュをクリアします（十分かもしれません）。

そしてfirebugで検査します

まだ完了していない場合はFirebugをインストールします https://addons.mozilla.org/en-US/firefox/addon/firebug/

入力を右クリックし、[Firebugで要素を検査]をクリックします。

優先度の高いcssプロパティがあるかどうかを確認します。

enter image description here

0
baptme