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

CSS で空の入力フィールドをターゲットにする

質問:

空の入力フィールドにスタイルを適用するにはどうすればよいですか。ユーザーが入力したときに確実に消えるようにするtext?

答え:

最新のブラウザでは、:placeholder-shown 疑似クラスを利用して、空の入力フィールドをターゲットにすることができます。 CSS コードは次のとおりです:

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

この効果を有効にするには、HTML の入力フィールドにプレースホルダー属性を追加する必要があります。 Chrome では、プレースホルダーの値として少なくともスペース文字が必要であることに注意してください。

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

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