ATOZ CSSクイックヒント：プレースホルダーテキスト

この記事は、ATOZ CSSシリーズの一部です。このシリーズの他のエントリをここで見つけることができます。対応するビデオ疑似要素の全文とスクリーンショットを表示できます。

ATOZ CSSシリーズへようこそ！このシリーズでは、アルファベットの異なる文字から始まるさまざまなCSS値（およびプロパティ）を探ります。スクリーンショットでは不十分な場合があることがわかっているため、この記事では、スタイルのプレースホルダーテキストに関する新しいヒントを追加しました。

pはプレースホルダーテキストを表します

pseudo-elements:beforeand:afterは、非セマンチックな要素でマークアップを台無しにすることなく、複雑な設計機能を構築するのに最適です。 :first-lineや:first-letterなどの他の擬似要素では、HTMLドキュメントでマークされていない要素のスタイルにアクセスできます。

擬似要素のスクリーンショットでこれらの多くを見ましたが、見たことのない擬似要素の1つはプレースホルダーテキストのスタイルでした。この問題を解決しましょう。

[入力プレースホルダー]を選択

最初に、次のHTML：

を想像しましょう

<code class="language-html"><input class="name-field" type="text" placeholder="Enter your name"></code>

以下に示すように、入力テキストの色を赤に設定できます：

<code class="language-css">.name-field {
  color: red;
}</code>

プレースホルダー属性に従って入力スタイルを選択して設定することもできます。

しかし、これは、プレースホルダーテキスト自体の外観を設定するのではなく、入力フィールドで入力フィールドに入力された

<code class="language-css">input[placeholder="Enter your name"] {
  color: red;
}</code>

ユーザー入力

テキストのスタイルを作成します。これを行うには、プレースホルダーの擬似要素用の一連のベンダープレフィックスセレクターが必要です。

これは繰り返しのように見えますが、残念ながらこれを行うための簡潔な（繰り返さないでください）方法はありません。

<code class="language-css">::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}</code>

次の方法は無効です：

これは、ブレース内にスタイルを適用するために、ブラウザがカンマ分離されたシリーズの各セレクターを「理解」できる必要があるためです。

<code class="language-css">::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}</code>

SASS

を使用してプレースホルダースタイルを設定します この重複CSSを解決する1つの方法は、SASSハイブリッドマクロを使用することです。これは私がプロジェクトの99％で使用するものです：

これにより、すべてのブラウザのプレースホルダーを単一のSASS

を使用してスタイリッシュすることができます。

プレースホルダースタイルを設定するときは、

特異性に注意を払ってください

<code class="language-scss">@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}</code>

IEブラウザでは、入力されたスタイルを設定すると、プレースホルダーテキストのスタイルセットをオーバーライドする場合があります。 @include

IEプレースホルダースタイルが特異性が高いことを確認して、予想どおりに表示されるようにします。これは

を使用する場合でもありますが、この強力なツールを使用する場合は注意してください。

プレースホルダーの不透明度に注意してください

Firefoxでは、プレースホルダーテキストのデフォルトの不透明度は約0.5であるため、プレースホルダーに設定すると、

も設定されない限り、色が暗くなります。 opacity: 1 color: red remormize.cssを使用している場合でも、このアイテムはリセットされません。完全に不透明なプレースホルダーがプロジェクトに不可欠である場合は、このヒントに留意してください！

CSSプレースホルダーテキスト（FAQ）

に関する

FAQ

CSSのプレースホルダーテキストの色を変更する方法は？

CSSのプレースホルダーテキストの色は、

pseudo-elementを使用して変更できます。この擬似要素を使用すると、入力またはテキストエリア要素のプレースホルダーテキストをスタイリングできます。これが色を赤に変更する方法の例です：

::placeholder

ブラウザの互換性が重要であることを忘れないでください。 Firefoxの場合、

<code class="language-html"><input class="name-field" type="text" placeholder="Enter your name"></code>

を使用してください。

::-moz-placeholderプレースホルダーテキストのフォントサイズを変更できますか？ :-ms-input-placeholder ::-webkit-input-placeholderはい、プレースホルダーテキストのフォントサイズを変更できます。色を変えるのと同じように、

pseudo-elementを使用してフォントサイズを変更できます。例は次のとおりです。

これにより、プレースホルダーテキストのフォントサイズが18pxに変更されます。 ::placeholder

プレースホルダーテキストのフォントスタイルを変更することは可能ですか？

<code class="language-css">.name-field {
  color: red;
}</code>

絶対に、プレースホルダーテキストのフォントスタイルを変更できます。斜体、大胆なスタイル、またはその他のスタイルで作ることができます。これがイタリックにする方法の例です：

これにより、プレースホルダーテキストのフォントスタイルが斜体に変更されます。

プレースホルダーテキストの不透明度を変更できますか？

<code class="language-css">input[placeholder="Enter your name"] {
  color: red;
}</code>

はい、プレースホルダーテキストの不透明度を変更できます。これは、CSSの

属性を使用して実行できます。例は次のとおりです。

これにより、プレースホルダーテキストの不透明度が0.5に変わり、半透明になります。

opacityプレースホルダーテキストに背景色を追加する方法は？

<code class="language-css">::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}</code>

残念ながら、プレースホルダーテキストに背景色を追加することはできません。

Pseudo-Elementsでは、プレースホルダーテキストの色、フォントサイズ、フォントスタイル、不透明度を設定することのみを行うことができます。

などの他の属性はサポートしていません。

プレースホルダーテキストでCSSアニメーションを使用できますか？

::placeholderいいえ、プレースホルダーテキストでCSSアニメーションを使用することはできません。 background-colorpseudo-elementsは、CSSアニメーションやトランジションをサポートしていません。

さまざまなプレースホルダースタイルをさまざまな方法で設定することは可能ですか？

はい、さまざまな方法で異なるプレースホルダースタイルを設定できます。入力またはテキストエリア要素ごとに別のクラスまたはIDを使用するだけです。例は次のとおりです。::placeholder

これにより、クラス「input1 "red」の入力にプレースホルダーテキストが作成され、クラス「input2」ブルーを使用した入力のプレースホルダーテキストが作成されます。

::placeholderで擬似クラスを使用できますか？

いいえ、:hover、:active、:focusなどの擬似クラスを使用することはできません。 ::placeholder擬似要素は擬似クラスをサポートしていません。 ::placeholder

CSSを使用してプレースホルダーテキストを変更することは可能ですか？

いいえ、CSSを使用してプレースホルダーテキストを変更することはできません。プレースホルダーテキストの内容は、HTMLを使用してのみ変更できます。

でメディアクエリを使用できますか？ ::placeholder

はい、メディアクエリを

で使用できます。これにより、画面のサイズやデバイスに応じて、プレースホルダーテキストをさまざまな方法でスタイリングできます。例は次のとおりです。::placeholder

<code class="language-html"><input class="name-field" type="text" placeholder="Enter your name"></code>

これにより、画面幅が600px以下から赤の画面幅で、画面上のプレースホルダーテキストの色が変更されます。

以上がATOZ CSSクイックヒント：プレースホルダーテキストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。