CSSはプレースホルダーの色を設定します

CSS のプレースホルダーは、テキスト入力ボックスに表示されるプロンプト テキストを指します。プレースホルダーでは、フォント、色、サイズ、その他のスタイルを設定して、どのコンテンツを入力する必要があるかをユーザーに明確に知らせることができます。プレースホルダーの色を設定する方法は次のとおりです。

CSS では、プレースホルダーの色の設定は、疑似要素 ::placeholder を通じて実現できます。この疑似要素を使用すると、色、フォント、サイズなど、プレースホルダーにさまざまなスタイルを設定できます。以下は CSS サンプルです。

/* 设置placeholder字体颜色为灰色 */
::placeholder {
  color: #999;
}

上記の例では、::placeholder 疑似要素を使用して、プレースホルダーの色をグレーに設定します。もちろん、ここでの色は必要に応じてカスタマイズでき、16 進値、RGB 値、英単語などにすることができます。

ブラウザごとに、::placeholder 疑似要素のサポート レベルが異なることに注意してください。たとえば、古いバージョンの IE ブラウザはこの疑似要素をサポートしておらず、Firefox ブラウザで同じ効果を実現するには :-moz-placeholder プレフィックスを追加する必要があります。したがって、::placeholder 疑似要素を使用する場合は、各ブラウザをテストして適切に動作することを確認することをお勧めします。

プレースホルダーの色の設定に加えて、::placeholder 疑似要素を通じてプレースホルダーのサイズ、フォント、スタイルなどを設定することもできます。以下は、より完全な例です。

/* 设置placeholder样式 */
input[type="text"]::placeholder {
  font-size: 16px; /* 字体大小 */
  font-family: 'Arial', sans-serif; /* 字体 */
  font-style: italic; /* 字体样式 */
  color: #666; /* 字体颜色 */
}

上の例では、input[type="text"]::placeholder セレクター プレースホルダーを使用して、ページ上のすべての入力ボックスを選択します。サイズ、フォント、スタイルなどを設定します。

要約すると、CSS でのプレースホルダーの色の設定は非常に簡単で、::placeholder 疑似要素を使用するだけで実現できます。もちろん、これを具体的に使用する場合は、この疑似要素が適切に動作することを保証するために、各ブラウザのサポートも考慮する必要があります。

以上がCSSはプレースホルダーの色を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。