How Can CSS Detect Text Presence in Input Fields on External Websites?

Detect Input Text Presence Using CSS Across Uncontrollable Pages

Detecting text presence in input fields is a common task, but traditional methods like :empty and [value=""] may not work effectively in all scenarios. For situations where JavaScript is inaccessible, CSS styles can be leveraged to achieve this goal.

Using :placeholder-shown Pseudo Class

If the input element includes a placeholder attribute, the :placeholder-shown pseudo class comes into play. This pseudo class targets input fields where the placeholder text is visible, indicating that the field is empty.

Implementation:

input:not(:placeholder-shown) {
  /* CSS styles applied when input has text */
}

input:placeholder-shown {
  /* CSS styles applied when input is empty */
}

Example Usage:

<input placeholder="Text is required">

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

<input placeholder=" ">

With this approach, the first two inputs will receive the styles applied to :not(:placeholder-shown) as they contain text or have a non-empty placeholder value. The third input, which has a placeholder but no text, will receive the styles applied to :placeholder-shown.

This method is particularly useful when working with themes and styles applied to third-party pages using browser extensions like Stylish, as it allows for customization based on the presence or absence of text in input fields without the need for JavaScript.

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