CSSスタイルを使用してプレースホルダのテキストチップの色を変更する方法

PlaceHolder属性に慣れていない場合は、それが何であるか、そしてそれが使用されるのかを少し明確にしましょう。 フィールド入力フィールドに使用されます。 属性は、いくつかの先端の役割を示すことによって、入力フィールドの碑文を表示します。 私たちのサイトの前半で、 javaScriptを使用して、 良い面 この方法 これはクロスブラウザです。 それでは、InputArea要素とTextArea要素で使用されているプレースホルダー属性の様式化について説明しましょう。
私たちの例の入力フィールドコードは次のようになります。

出口で、そのようなフィールドを入手します。

現在、プレースホルダーを様式化する必要があると想像しましょう。これについては、CSSに一連の規則を登録する必要があります。

:: - webkit-input-placeholder(カラー:#c1c1c1;):: - moz-placeholder(カラー:#c1c1c1;)/ * Firefox 19+ * /:-moz-placeholder(カラー:#c1c1c1;)/ * Firefox 18- * /:-ms-input-placeholder(色:#c1c1c1;)

我々が得る:

私たちはすべてのプロパティを変更することはできませんが、最新のブラウザでサポートされているそれらのほとんどのリストは以下のとおりです。
フォント (関連プロパティも)
バックグラウンド。 (関連プロパティも)

ワードスペース
文字間隔
テキスト装飾
垂直方向の整列
テキスト変換
行の高さ
テキストインデント
テキストオーバーフロー。
不透明度

別のブラウザ ルールはさまざまな方法で書かれています 単一の標準はありません、このレコードのセットは関連性があり続けています。 IEブラウザ、および18版のプレースホルダーの下のFirefoxは疑似クラスとして認識され、新しいFirefoxブラウザではWebKitとBlinkが疑似要素として認識されています。

プレースホルダーにおけるテキストの削減
時々ヒントは入力フィールドに完全に適合することができないような長さになる可能性があります。 これらの目的のために、入力フィールドのテキストプレースホルダを縮小する追加のプロパティを使用することもできます。

入力(text-overflow:省略記号;)入力:: - placeholder(text-overflow:省略記号;)入力:-moz-placeholder(テキストオーバーフロー:省略;)入力:-ms-input-placeholder(テキストオーバーフロー:省略記号;)

その結果、このタイプのプレースホルダを使用して入力フィールドが取得されます。

フィールドをクリックするときにテキストを非表示にします
デフォルトでは、各ブラウザはプレースホルダを自分の方法で解釈します。 いくつかのブラウザでは、フィールドをクリックするとすぐに隠れています。これは、入力フィールドの少なくとも1文字の存在下に隠されています。 フィールドをクリックするとテキストを隠してみましょう。

:焦点:: - webkit-input-placeholder(色:透明;):焦点:: - Moz-PlaceHolder(色:透明;):焦点:-moz-placeholder(色:透明;):焦点:-ms-input - PLACEHOLDER(色:透明;)

そのような行動を取得します。

疑似要素::プレースホルダーカラー (場合によっては、疑似クラス)フォーム要素を埋めるテキストを設定できます。 PlaceHolder属性を使用してインストールされています。 .

このテキストは、特別な接頭辞を使用して最新のブラウザ用に様式化できます。

:: - webkit-input-placeholder(/ * Chrome / Opera / Safari * / Color:Pink;):: - Moz-PlaceHolder(/ * Firefox 19+ * / Color:Pink;):-ms-input-placeholder( / * IE 10+ * /カラー:ピンク;):-moz-placeholder(/ * Firefox 18- * /カラー:ピンク;)

警告:標準以外の構文で、奇妙な名前が接続されています。 :プレースホルダーが標準で、仕様の著者でさえ、::プレースホルダーは標準化されていると考える可能性があります。

疑似要素の場合と同様に、次のように特定の要素に適用できます。

input.big-dog :: - webkit-input-placeholder(カラー:オレンジ;)

例を見る

の違い:プレースホルダー表示と::プレースホルダー

:PlaceHolder-exhidは入力フォームを強調表示するように設計されており、CSSプレースホルダーの色はテキストの様式化を担当します。

図を見てください。

それはそれが混乱する多\u200b\u200bくのことがわかりました、そして私はしばしば前記仕様を見ることがよくあります:プレースホルダーが表示されていますが、::プレースホルダー。

それは彼のための親要素であるため、プレースホルダが表示されているプレースホルダーがテキストの様式化に影響を与える可能性があることに注意してください( たとえば、フォントサイズを変更できます).

注意してください::プレースホルダー表示 - 擬似クラス( コンクリート状態の要素)、A ::プレースホルダは疑似要素です( ドームにない目に見える部分)。 それらはシングルと乳製の引用符で異なります。

以来、プレースホルダが表示されているのは疑似衝突ですから、既存の要素を割り当てる必要があります。 そのため、フォーム要素内のテキストが表示されているときに入力フォームを割り当てます。 疑似要素::プレースホルダーはプラグ自体のテキストをラップします。

要素またはクラス?

この計画では、入力プレースホルダの色は標準化されていません。 つまり、各ブラウザには、どのように機能するかについての理解があります。

最初は、この疑似衝突が導入されました ブラウザFirefox。 。 この疑似クラスは、操作のためのスペースはそれほど多くない。 たとえば、入力フォームを選択したときにテキストの色を変更したい場合は、入力タイプセレクターを使用する必要があります.UPES :: PlaceHolder。 そして疑似衝突はそれがそれをすることを許さない。

IE10は、この機能を疑似クラスとしてサポートし、アイテムではありません。 他のすべてのブラウザで、彼は疑似要素と見なされています。

Firefoxのカラープラグ

プラグの色が他のブラウザと比較してより薄く見えることに気づいた。 下の図では、左側にFirefox 43が表示され、右側のChrome 47


これは、デフォルトでは、Firefoxのすべての「プラグ」が追加の透明度値を受信するためです。 この効果を取り除くために、次のコード行を必要となります。

:: - Moz-PlaceHolder(不透明度:1;)

Firefoxブラウザでこのデモを開くようにしてください。

スタイルサポート

疑似要素は次のプロパティをサポートしています。

  • フォントのプロパティ
  • 色;
  • 背景プロパティ
  • 単語間隔
  • 文字間隔;
  • テキスト装飾
  • 垂直方向の整列。
  • テキスト変換
  • 行の高さ;
  • テキストインデント
  • 不透明度

追加のリソース

MDNのドキュメント
すなわちドキュメンテーション
展開された記事ブログツリーハウス


あなたの多くはしばしばフォームに直面しており、プロンプトとして署名があるところです。 入力時に消えます。 そのため、これはプレースホルダ属性です。これは、テキスト(入力)を入力するために作成された要素です。 これを使用すると、このフィールドに入力する前にヒントとして表示されるテキストを指定できます。 残念ながら、この属性を使用してすべてのブラウザが正しく機能しているわけではありません。 時代遅れのバージョンとこのテキストは表示されません。

以下に説明されている問題を解決するためにそれを作る方法を検討してください。

1.遊技者のスタイルを変更する方法。
2. Playholderのテキストを非表示にする方法を入力しても、すでにフィールドを押すとすでに押されています。
3.プレースホルダーが原則として表示されていないブラウザとの対応。

すべての例では、入力フィールドで動作します。

入力内のプレースホルダでテキストチップカラーを変更する方法

長い間、各ブラウザがさまざまな方法でプレースホルダを表示するだけでなく、スタイルを変更するための特別なプロパティも必要です。 そして、私は書き込み中の対応する接頭辞について話していません。 それらを見てみましょう。

デフォルトでは、多くのブラウザでは、先端の色は灰色です。 に この例 それを黒にしましょう。

この項目の透明性がサポートされているブラウザには、透明度を担当するOpacityプロパティを入力する必要があります。 それ以外の場合、色は灰色、およびデフォルトでも灰色になります。

そして、はい、これらのクラスプロパティを指定するために使用できます。 私たちは下を見ます:

入力電話:: - webkit-input-placeholder(色:赤;)
.input-text :: - webkit-input-placeholder(色:緑色;)
/ * etc ... * /

フィールドをクリックするとプレースホルダーを削除します

デフォルトでは、ブラウザでは、PlaceHolder属性からのテキストが入力が開始された後にのみ消えますが、入力フィールドを押すことでこのテキストを気を取られるようにしたい人もあります。 ほとんどの場合これを行います。 それのために、あなたは焦点のためのスタイルを書く必要があります。ここで、テキストチップの色が完全に透明になるでしょう、つまり目に見えるようになるでしょう。

:焦点:: - webkit-input-placeholder(不透明度:0;)/ * WebKit * /
::: - MOZ-PlaceHolder(不透明度:0;)/ * Firefox 19+ * /
:フォーカス: - モズプレースホルダ(不透明度:0;)/ * Firefox 18- * /
:焦点:-ms-input-placeholder(不透明度:0;)/ * IE * /

CSSアニメーションの色のスムーズな変更や色の変化を設定できます。 しかし、クロスブラウザでそのような解決策が発生する可能性があります。

入力でプレースホルダー属性をサポートしていないろうが何をするか?

まあ、まさに失われない)はい、実際にはそのようなブラウザがあります。 例えば、IE8。 そして、はい、常にそれを使う人がいます。 あなたがすべての訪問者のために解決する必要があるならば、それからもう少し忍耐力をかけてください。

この問題を解決するには、jQueryプラグインをこのjQuery - JQuery.PlaceHolderにダウンロードしてください。 今日は明日変わるので、私はリンクを与えません。 ただし、プラグインのダウンロードソースで実行されている例をダウンロードすることができれば。

それを接続してください。 原則として必要なものを忘れないでください。jQuery Connect。


PlaceHolder属性は、空の入力フィールド内のプロンプトを作成するために使用されます(タグ そして