How Can I Detect Text in Input Fields Using Only CSS?

Detect Text in Input Fields Using CSS

CSS offers limited options for detecting if an input field contains text. The :empty pseudo-class and [value=""] selector do not provide satisfactory results.

Solution Using :placeholder-shown

For input fields with a placeholder attribute, the :placeholder-shown pseudo class can be utilized. The placeholder attribute defines a placeholder text that appears when the input is empty. By leveraging this property, the following CSS rule can be applied:

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

When the input is empty, the placeholder text is shown, and the border of the input will be set to red. When the user enters text, the placeholder text disappears, and the border color changes to green, indicating the presence of text in the input.

Limitations

This solution has some limitations:

• It requires the input field to have a placeholder attribute.
• The placeholder text cannot be blank. However, a single space character can be used to create an invisible placeholder.

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