2012-03-15 11 views
1

を変更します赤でもあります。 ChromeとSafariでは、入力を「色付け」するとプレースホルダには影響しません。Firefoxのプレースホルダの色は、私は(:<a href="http://jsfiddle.net/YzkSx/" rel="nofollow">http://jsfiddle.net/YzkSx/</a> ChromeとFirefoxの上でそれを試してみてください)、これはFirefoxで動作しなかったことに驚きました

私はmoz-placeholder擬似クラスについて知っていますが、ユーザーが入力を開始したときに入力に適用される色が違うということを気にする必要はありません。

ありがとうございました!

+0

私はそれを行うeleganの解決策はないと思います。関連するhttp://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-cssを参照してください。 – antyrat

答えて

2

これは実際には意識的な実装の選択です(プレースホルダスタイリングが疑似要素ではなく疑似クラスである理由)。 WebKitのアプローチの問題点は、プレースホルダで入力の色と背景の両方をスタイルすると、WebKitは背景色を適用しますが、色のスタイルは適用しないため、プレースホルダテキストは簡単には判読できなくなります。もちろん、プレースホルダ固有のスタイルでその問題を回避することはできますが、一般的に人々は忘れてしまいます。

1

Firefoxの場合は、ブラウザのレンダリング方法と同じようにスタイリングを使用する必要があります。 FFが「IE以外は誰もが使用している標準」を維持することと接触していないというもう一つの兆候。あなたは簡単に次のようにそれを行うことができます限り、ブラウザは「標準」を制御するために戦い続けるように、これは問題であり続けるだろう

input: { 
    color: red; 
} 
input:-moz-placeholder { 
    color: #a1a1a1; 
} 

。 Unfortianatly、IEとFFは、彼らが得たすべてのものとのWebKitを戦っているが、過去のアップデートで見てきたとしても、FFは、最終的に

+2

「誰もが1つの標準を使用する」でなければなりません。別のものを使用しています "。目標は「標準は何かを意味するもの」に向かって傾けるべきであり、必ずしも「標準は誰かが最初に出すもの」ではない。この場合、WebKitはいくつかの深刻な欠点を持っています(標準化のために提案していない)。 Mozillaは、(まだ標準化のために提案されていない)異なるセットの欠点を持つものをやっている。人々がこれをいかにして安全にするかを理解したら、それは標準化されるべきです。 –

+0

...笑...恥ずかしがり屋はちょうどオンラインで理解されていません – SpYk3HH

+0

あなたは皮肉なことなしにしたことを正確に言っている人がたくさん.... –

0

多分あなたはほとんど同じ効果を得ることができます.... IE用として、周りに来るかもしれません

input { color: ... } 
input:focus { color: ... } 

-moz-placeholderを使用しないでください。

0

HTML5はまだ標準ではないという兄弟を覚えておく必要があります。奇妙な小さなエラーがたくさんあります。しかし、もし可能であれば、入力要素内のプレースホルダを介して赤いテキストは表示されません。

0

現在のところ、プレースホルダテキストのスタイルを設定するためのクロスブラウザ、信頼性の高い、将来性のない方法は、JavaScriptを使用してネイティブplaceholder属性を削除し、対応する機能をJSでエミュレートすることです。

プレースホルダテキスト自体をスタイルする必要がない場合は、:focus疑似クラスで十分でしょう。

関連する問題