1

Firefox 13.0.1 でこのプレースホルダーのスタイルを正しく設定できません

プレースホルダー付きの入力フィールドがあります。

<input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" />

私はこのCSSを持っています:

.textFieldLarge{
    width:400px;
    height:50px;
    line-height:50px;
    padding-left:5px;
    padding-right:5px;

    background:none;
    background-color:#FFF;
    border:solid 1px #BBB;

    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    color:#333;
}

.textFieldLarge::-webkit-input-placeholder, .textFieldLarge:-moz-placeholder{
    font-style:italic;
    color:#BBB;
}

これにより、テキスト フィールド #333 とプレースホルダー #BBB イタリック体のスタイルが設定されます。これはクロムとIEで動作していますが、FFを理解できません。

編集、同時に適用した問題を発見::-webkit-input-placeholder

それでも修正を歓迎しますが、両方を別々に適用するとうまく機能するので、可能性は疑わしいです。もう本当の問題ではありませんが、少し面倒です。

4

2 に答える 2

9

セレクターの一部が無効な場合、セレクター全体が無効になります。

-moz-したがって、とのそれぞれに対して 2 つの異なるルールが必要-webkit-です。

于 2012-07-12T19:33:24.477 に答える
3

この質問を投稿してからしばらく経ちましたが、Gerve の回答に加え::-moz-placeholderて、Firefox 19+: http://mzl.la/15FPlx6を使用する必要があり、IE10 のサポートを追加でき:-ms-input-placeholderます。したがって、最終的なコードは次のようになります。

.textFieldLarge::-webkit-input-placeholder {
  font-style:italic;
  color:#BBB;
} 

.textFieldLarge:-moz-placeholder {
  font-style:italic;
  color:#BBB;
}

.textFieldLarge::-moz-placeholder { /* Firefox 19+ */
  font-style:italic;
  color:#BBB;
}

.textFieldLarge:-ms-input-placeholder { /* IE10 */
  font-style:italic;
  color:#BBB;
}
于 2013-02-24T06:54:43.783 に答える