Styling Placeholder Display with the :placeholder-shown Pseudo-Class in CSS

Placeholder-shown & Not(placeholder-shown)

In CSS, the :placeholder-shown and :not(:placeholder-shown) pseudo-classes are used to target and style form input elements based on whether their placeholder text is visible or not. These pseudo-classes are particularly useful for customizing the appearance of input elements depending on whether the placeholder text is displayed or hidden.

:placeholder-shown Pseudo-Class: This pseudo-class selects form elements that have their placeholder text currently displayed or visible. It is typically used with input elements such as text fields or textareas that have a placeholder attribute.

:not(:placeholder-shown) Pseudo-Class: Conversely, the :not(:placeholder-shown) pseudo-class selects form elements that do not have their placeholder text displayed, indicating that the user has interacted with the field or entered text.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input pseudo-classes</title>
    <style>
      textarea {
        outline: none;
        border-radius: 2px;
      }
      textarea:placeholder-shown {
        border-color: #e93e3e;
      }
      textarea:not(placeholder-shown) {
        border-color: #74e93e;
      }
    </style>
  </head>
  <body>
    <h3>Input pseudo-classes</h3>
    <p>:placeholder-shown</p>

    <textarea placeholder="Enter Your Comments"></textarea>
  </body>
</html>

Live Preview

The provided CSS code is used to style a <textarea> element based on whether it has placeholder text displayed (:placeholder-shown) or if the user has entered text (:not(:placeholder-shown)).

textarea: This selector applies styles to all <textarea> elements.

outline: none;: This style removes the default outline (border) that appears when the <textarea> element is focused. It effectively removes the blue focus outline.
border-radius: 2px;: This style sets a small border-radius of 2 pixels, giving the <textarea> rounded corners.

textarea:not(placeholder-shown): This selector targets <textarea> elements that do not have their placeholder text displayed, indicating that the user has interacted with the field or entered text.

border-color: #74e93e;: This style sets the border color of the <textarea> to a shade of green (#74e93e) when the user starts typing or interacts with the field. This provides feedback that the user has engaged with the input.

Here's how this code works in practice:

When the <textarea> initially loads and the placeholder text is visible, it will have a red border (#e93e3e) to draw the user's attention to the fact that they need to enter content.
When the user starts typing or interacts with the <textarea>, the placeholder text is hidden, and the border color changes to green (#74e93e), indicating that the field is active and the user can enter text.

This code enhances the user experience by providing clear visual feedback regarding the state of the <textarea> and its placeholder text.

These pseudo-classes allow you to provide visual cues to users about the state of input fields, making your forms more user-friendly and informative.