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

CSS を使用して入力フィールド内のテキストを検出する

CSS では、入力フィールドにテキストが含まれているかどうかを検出するための限定されたオプションが提供されます。 :empty 疑似クラスと [value=""] セレクターでは、満足のいく結果が得られません。

:placeholder-shown を使用した解決策

プレースホルダーを含む入力フィールドの場合属性を使用すると、:placeholder-show 疑似クラスを利用できます。 placeholder 属性は、入力が空の場合に表示されるプレースホルダー テキストを定義します。このプロパティを利用すると、次の CSS ルールを適用できます:

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

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

入力が空の場合、プレースホルダー テキストが表示され、入力の境界線が赤に設定されます。ユーザーがテキストを入力すると、プレースホルダー テキストが消え、境界線の色が緑色に変わり、入力にテキストが存在することを示します。

制限事項

このソリューションには次のような特徴があります。いくつかの制限事項:

• 入力フィールドにはプレースホルダーが必要です属性.
• プレースホルダー テキストを空白にすることはできません。ただし、単一のスペース文字を使用して、非表示のプレースホルダーを作成できます。

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