How Can I Style Empty Input Fields Using CSS?

Empty Input Field Styling in CSS

Querying an input field based on its empty state requires a specific approach in CSS. While the provided input[value=""] selector won't work in modern browsers, there is a solution available.

Enter :placeholder-shown. This pseudo-class specifically targets empty input fields, allowing you to apply styles that will be removed once the input field contains a value. For example:

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

It's important to note that the placeholder attribute should be set in the HTML for the :placeholder-shown selector to work. In addition, Chrome requires at least a space character to be present as the placeholder value.

Ensure you include the placeholder attribute with a space as follows:

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

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