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

CSS での空の入力フィールドのスタイル

空の状態に基づいて入力フィールドをクエリするには、CSS での特定のアプローチが必要です。提供されている input[value=""] セレクターは最新のブラウザーでは機能しませんが、利用可能な解決策があります。

:placeholder-shon と入力します。この疑似クラスは特に空の入力フィールドをターゲットにしており、入力フィールドに値が含まれると削除されるスタイルを適用できます。例:

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

:placeholder-shown セレクターが機能するには、HTML でプレースホルダー属性を設定する必要があることに注意することが重要です。さらに、Chrome では、プレースホルダー値として少なくともスペース文字が存在する必要があります。

次のように、必ずスペースを含むプレースホルダー属性を含めてください:

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

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