CSS :placeholder-shown Pseudo-class

CSS :placeholder-shown

The CSS :placeholder-shown pseudo-class targets input or textarea elements that currently display placeholder text. It is useful for styling fields differently when they contain a placeholder versus when they have user input.

The syntax for the :placeholder-shown pseudo-class is:

</>

Copy

selector:placeholder-shown {
    property: value;
}

Where:

Parameter	Description
`selector`	The input or textarea element to which the `:placeholder-shown` pseudo-class will apply.
`property`	The CSS property to style the element.
`value`	The value assigned to the CSS property.

Examples

1. Styling Fields with Placeholder Text

In this example, input fields with placeholder text are styled with a lightgray background.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:placeholder-shown {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <form>
        <label>Name:</label>
        <input type="text" placeholder="Enter your name"><br><br>
        <input type="text"> 
    </form>
</body>
</html>

2. Hiding Labels When Placeholder is Shown

Here, labels are hidden when the placeholder text is visible.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        label {
            opacity: 1;
            transition: opacity 0.3s;
        }

        input:placeholder-shown + label {
            opacity: 0;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="Enter email">
        <label>Email Address</label>
    </form>
</body>
</html>

3. Changing Border Color Based on Placeholder

In this example, input fields with placeholder text are styled with a red border, while filled fields have a green border.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:placeholder-shown {
            border: 2px solid red;
        }

        input:not(:placeholder-shown) {
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Enter text"><br><br>
    <input type="text">
</body>
</html>

4. Styling Placeholder-Dependent Textareas

In this example, textareas with placeholder text are styled with a lightyellow background.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        textarea:placeholder-shown {
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <textarea placeholder="Enter your message" rows="4" cols="30"></textarea><br><br>
    <textarea rows="4" cols="30"></textarea>
</body>
</html>

5. Combining :placeholder-shown with Other Selectors

In this example, a field with placeholder text displays a gray icon, which disappears once the user types into the field.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:placeholder-shown::before {
            content: "🔍";
            color: gray;
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        input:not(:placeholder-shown)::before {
            content: "";
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Search">
</body>
</html>

TutorialKart

CSS :placeholder-shown Pseudo-class