Change an HTML Input Placeholder Color with CSS

You can use the ::placeholder pseudo-element to change an HTML input’s placeholder color.

CSS (Cascading Style Sheet) is used to change the input’s placeholder color. There are a few methods to change the color, such as using ::placeholder pseudo-element, Vendor Prefixes for Cross-Browser Support, and :focus. You can enhance the accessibility, match the placeholder color with your website’s branding, and make the input field noticeable by changing the HTML input’s placeholder color. We will discuss these methods in this blog in detail.

Table of Contents:

Methods to Change an HTML Input’s Placeholder Color with CSS
Conclusion

Methods to Change an HTML Input’s Placeholder Color with CSS

CSS (Cascading Style Sheet) properties are used to change the input’s placeholder color. Let’s discuss these properties below.

Method 1: Using ::placeholder pseudo-element

It is the basic method, you can use this method to change the input’s placeholder color. It won’t affect the input text in any case.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Placeholder</title>
    <style>
        input::placeholder {
            color: #ff5733;
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>Styled Placeholder Example</h1>
    <input type="text" placeholder="Enter your name...">
</body>
</html>

Output:

Explanation: In this code, color: #ff5733 is used to set the color to orange-red, and opacity:1 gives the full visibility.

Method 2: Using Vendor Prefixes for Cross-Browser Support

This method is used to color the placeholder, even if your browser is older. Where ::placeholder element can’t be supported at every time.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cross-Browser Placeholder</title>
    <style>
        input::-webkit-input-placeholder {
            color: #ff5733;
        }
        input:-moz-placeholder {
            color: #ff5733;
        }
        input::-moz-placeholder {
            color: #ff5733;
        }
        input:-ms-input-placeholder {
            color: #ff5733;
        }
    </style>
</head>
<body>
    <h1>Cross-Browser Placeholder Styling</h1>
    <input type="text" placeholder="Enter text...">
</body>
</html>

Output:

Explanation: In this code, ::-webkit-input-placeholder is used to support browsers like Chrome, Safari, and Edge. The:-moz-placeholder and::-moz-placeholder handle the version of Firefox and:-ms-input-placeholder ensures compatibility with Internet Explorer.

Method 3: Changing Placeholder Color on Focus

When the input is active, the :focus pseudo-class ensures the placeholder changes the color.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placeholder Color on Focus</title>
    <style>
        input::placeholder {
            color: #ff5733;
        }
        input:focus::placeholder {
            color: #3498db;
        }
    </style>
</head>
<body>
    <h1>Placeholder Color Change on Focus</h1>
    <input type="text" placeholder="Click to see color change...">
</body>
</html>

Output:

Explanation: The default placeholder color is orange-red, and when you click on the input field, the placeholder color changes to blue.

Method 4: Changing Placeholder Color for Different Input Types

If you want to change the placeholder color for different input fields, you can do this using the attribute selector for specific input fields.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placeholder Color by Input Type</title>
    <style>
        input[type="text"]::placeholder {
            color: green;
        }
        input[type="email"]::placeholder {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Placeholder Styling for Different Inputs</h1>
    <input type="text" placeholder="Text input placeholder">
    <input type="email" placeholder="Email input placeholder">
</body>
</html>

Output:

Explanation: The input[type=”text”]::placeholder makes the text input placeholder color green, and input[type=”email”]::placeholder makes the email input placeholder color blue.

Conclusion

The above-discussed methods are the most efficient way to change an HTML input’s placeholder color. You can use the CSS to change an HTML input’s placeholder color. Methods like placeholder pseudo-element, Vendor Prefixes for Cross-Browser Support, and: focus are used for this purpose to make the input field noticeable.