CSS のみを使用して HTML 入力フィールドのテキスト入力を検出するにはどうすればよいですか?

CSS を使用したテキスト入力の検出

CSS を使用して Web ページをカスタマイズするときに共通の要件が発生します。それは、入力フィールドにテキストが含まれているかどうかを検出する機能です。 。驚くべきことに、この機能は CSS によって直接提供されていません。

試みられた解決策

:empty 疑似クラスの使用や空の値のチェックなど、さまざまなアプローチが成功していません。 [value=""].

CSS プレースホルダーアプローチ

ただし、入力フィールドにプレースホルダー属性がある場合、CSS は :placeholder-shown 疑似クラスという解決策を提供します。このクラスは、空の入力フィールドとプレースホルダーのある入力フィールドを区別するために使用できます。

実装

重要なのは、プレースホルダー属性が存在し、次のものが含まれていることを確認することです。たとえ単一のスペースであっても、空白以外の値。以下に例を示します。

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

結論

:placeholder-shown 疑似クラスを利用すると、次のようなページであっても、入力フィールドにテキストが含まれているかどうかを効果的に検出できます。あなたにはコントロールできません。

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