:placeholder-shown CSS Pseudo Class

The :placeholder-shown pseudo-class in CSS is used to select input or textarea elements that are currently displaying placeholder text. This pseudo-class is particularly useful when you want to style form fields differently depending on whether the user has entered a value or if the placeholder is still visible. Essentially, it allows developers to apply specific styles only when the placeholder text is being shown, which can help improve form usability and design clarity.

One of the key features of :placeholder-shown is that it only applies when the input or textarea element is empty and the placeholder attribute is present. Once the user starts typing or the value of the field changes, the pseudo-class no longer applies, enabling dynamic styling based on user interaction. This makes it complementary to JavaScript-free form effects, such as floating labels or subtle input animations.

This pseudo-class can be combined with other selectors to create more advanced effects. For example, you might want to change the border color, background, or font style when the placeholder is visible. Here’s a simple example:

<style>
input:placeholder-shown {
    border: 2px solid #ccc;
    background-color: #f9f9f9;
    font-style: italic;
}

input:focus {
    border-color: #007BFF;
    background-color: #fff;
}
</style>

<input type="text" placeholder="Enter your name">

In this example, the input field has a light grey border and an italic font style while the placeholder text is visible. When the user focuses on the input, the border color changes and the background becomes white. This pseudo-class can also work alongside other pseudo-classes like :focus to create layered styling effects.

It’s worth noting that :placeholder-shown only targets elements that are capable of having placeholder text and will not apply to elements without a placeholder attribute. This makes it distinct from generic input selectors and ensures that styles are only applied in the relevant context. It can also be used to trigger CSS transitions or animations when the placeholder disappears, creating smoother, more interactive form designs.