CSS を使用して空の入力フィールドを確実にスタイル設定するにはどうすればよいですか?

CSS を使用した空の入力フィールドのスタイル設定

一般的なスタイル設定の必要性の 1 つは、空の入力フィールドに特定のルールを適用することです。これは、プレースホルダー テキストや色付きの境界線などの視覚的な手がかりをユーザーに提供するのに役立ちます。ただし、input[value=""] セレクターを使用して空の入力をターゲットにすると、意図したとおりに動作しない可能性があります。

最新のブラウザでは、:placeholder-shon 疑似クラスを使用すると、空の入力フィールドのスタイルを設定するためのより信頼性の高い方法が提供されます。 。この疑似クラスは、プレースホルダー テキストが現在表示されている入力フィールドをターゲットにしており、入力フィールドが空であることを示しています。

空の入力フィールドに赤い境界線を適用するには、次の CSS を使用できます。

input:placeholder-shown {
  border: 1px solid red;
}

HTML の入力フィールドにプレースホルダー属性も設定する必要があることに注意してください:

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

Chrome では少なくともスペースが必要です文字をプレースホルダー値として使用して、:placeholder-shon 疑似クラスをトリガーします。これにより、ユーザー入力を許可しながら、技術的には入力フィールドが空ではないことが保証されます。

:placeholder-shown を使用すると、空の入力フィールドを対象としたカスタム スタイルを作成し、強化されたユーザー フィードバックを提供できます。

以上がCSS を使用して空の入力フィールドを確実にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。