How Can I Style Empty Input Fields with CSS Using `:placeholder-shown`?

Styling Empty Input Fields with CSS: A Practical Guide

Styling empty input fields poses a challenge in CSS, as matching empty values with the common value="" selector can be unreliable. To effectively tackle this situation, we delve into an innovative and effective solution.

In modern browsers, the :placeholder-shown pseudo-class comes to the rescue. Unlike ::placeholder, which targets placeholder text, :placeholder-shown specifically selects empty input fields. This provides a precise way to apply styles when the field is devoid of any user input.

To illustrate this elegant approach, consider the following CSS rule:

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

To utilize this CSS rule effectively, it's crucial to remember that the input field must possess a placeholder attribute. Moreover, in Chrome browsers, ensuring that a space character is present within the placeholder attribute is essential for proper functionality. This guarantees that the :placeholder-shown pseudo-class is triggered as expected, even if the input field initially appears empty to the user.

Here's an example to demonstrate the implementation:

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

In conclusion, by harnessing the power of :placeholder-shown, we gain the ability to effortlessly style empty input fields in CSS. This innovative pseudo-class eliminates the limitations of the value="" selector, empowering developers to create user-friendly forms with ease.

The above is the detailed content of How Can I Style Empty Input Fields with CSS Using `:placeholder-shown`?. For more information, please follow other related articles on the PHP Chinese website!