CSS は外部 Web サイトの入力フィールド内のテキストの存在をどのように検出できますか?

制御不能なページ間で CSS を使用して入力テキストの存在を検出する

入力フィールド内のテキストの存在を検出することは一般的なタスクですが、:empty のような従来の方法および [value=""] は、すべてのシナリオで効果的に機能するとは限りません。 JavaScript にアクセスできない状況では、CSS スタイルを活用してこの目標を達成できます。

:placeholder-shown 擬似クラスを使用する

入力要素にプレースホルダー属性が含まれる場合、:placeholder-shown 疑似クラスが機能します。この疑似クラスは、フィールドが空であることを示す、プレースホルダー テキストが表示される入力フィールドをターゲットとしています。

実装:

input:not(:placeholder-shown) {
  /* CSS styles applied when input has text */
}

input:placeholder-shown {
  /* CSS styles applied when input is empty */
}

使用例:

<input placeholder="Text is required">

<input placeholder=" " value="This one is valid">

<input placeholder=" ">

このアプローチでは、最初の 2 つの入力がスタイルを受け取ります。テキストが含まれるか、空ではないプレースホルダー値を持つため、:not(:placeholder-shown) に適用されます。 3 番目の入力には、プレースホルダーはありますが、テキストはありません。:placeholder-shown に適用されるスタイルを受け取ります。

このメソッドは、次のようなブラウザー拡張機能を使用してサードパーティのページに適用されるテーマやスタイルを操作する場合に特に便利です。 JavaScript を必要とせず、入力フィールドのテキストの有無に基づいてカスタマイズできるため、スタイリッシュです。

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