CSS のみを使用して、入力フィールドにテキストが含まれているかどうかに基づいて入力フィールドのスタイルを設定するにはどうすればよいですか?

JavaScript を使用せずに入力フィールド内のテキストを識別する

CSS スタイルの領域では、入力要素内のテキストの存在を検出することができます。複雑なタスク。ただし、とらえどころのない :empty 擬似クラスと [value=""] セレクターでは、望ましい結果が得られません。

それにもかかわらず、:placeholder-shown 擬似クラスが潜在的な解決策として浮上します。この疑似クラスは、プレースホルダー テキストを表示せずに、プレースホルダー属性を持つ入力要素をターゲットとします。

:placeholder-shown の使用方法

1. 入力内容を確認してください。要素には空ではないプレースホルダー属性があります。単一のスペースでも許容されます。
2. テキストが含まれる入力のスタイルを設定するには、:not(:placeholder-shown) セレクターを使用します。
3. 入力のスタイルを設定するには、:placeholder-shown セレクターを使用します。空の場合。

例:

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

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

このコード

注意事項

この手法はプレースホルダー属性の使用に依存していることに注意してください。そのため、プレースホルダー テキストが望ましくないシナリオには適さない可能性があります。

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