How Can I Style Empty Input Fields with CSS and Remove the Style Upon User Input?

Targeting Empty Input Fields with CSS

Question:

How can you apply a style to an empty input field, ensuring that it disappears when the user enters text?

Answer:

In modern browsers, you can utilize the :placeholder-shown pseudo-class to target empty input fields. Here's the CSS code:

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

To enable this effect, you need to add the placeholder attribute to the input field in HTML. Keep in mind that Chrome requires at least a space character as the value for placeholder.

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

The above is the detailed content of How Can I Style Empty Input Fields with CSS and Remove the Style Upon User Input?. For more information, please follow other related articles on the PHP Chinese website!