Can CSS Detect Text Input in External Pages Without JavaScript?

Detecting Text Input Using CSS in Uncontrollable External Pages

In order to determine whether or not an input field contains text solely through CSS, consider using a placeholder attribute. While the placeholder is necessary and cannot be empty, it can be set to a single space.

Applying the CSS Rule:

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

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

Demonstration:

<input placeholder="Text is required">
<input placeholder=" " value="This one is valid">
<input placeholder=" ">

In this example, the input with a placeholder and no text will have a green border, indicating that it is empty. Conversely, the input with a placeholder and text, or with a space-only placeholder and value, will have a red border.

Additional Notes:

• This method works because :placeholder-shown is a pseudo-class that matches elements that are showing a placeholder.
• :placeholder-shown is supported in all major browsers.

The above is the detailed content of Can CSS Detect Text Input in External Pages Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!