How to change an HTML input’s placeholder color with CSS

To change the color of an HTML input’s placeholder text with CSS, you can use the ::placeholder pseudo-element. This pseudo-element targets the placeholder text within an input field, allowing you to apply various CSS styles, such as color. For example, to change the placeholder text color to blue, you can use the following CSS: input::placeholder { color: blue; }. This styling is widely supported in modern browsers, but for older browser versions, you might need vendor prefixes like ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, and :-ms-input-placeholder.

Basic Usage

Using ::placeholder:
To change the placeholder color, use the ::placeholder pseudo-element:

input::placeholder {
    color: red;
}

• This changes the placeholder text color to red for input fields.

HTML Example:

• Applying the above CSS will make the placeholder text "Enter your name" appear in red.

Browser Compatibility

Vendor Prefixes:
For better browser compatibility, use vendor prefixes:

/* Chrome, Safari, Opera */
input::-webkit-input-placeholder {
    color: red;
}

/* Firefox 4-18 */
input:-moz-placeholder {
    color: red;
}

/* Firefox 19+ */
input::-moz-placeholder {
    color: red;
}

/* Internet Explorer 10-11 */
input:-ms-input-placeholder {
    color: red;
}

• Using these prefixes ensures the styles are applied across different browsers and their versions.

Applying Styles to Textareas and Other Inputs

Textareas:
To change the placeholder color in a textarea, apply similar styles:

textarea::placeholder {
    color: green;
}

• Works for textarea elements, changing their placeholder text color to green.

Other Input Types:
You can target specific input types:

input[type="email"]::placeholder {
    color: blue;
}

input[type="password"]::placeholder {
    color: gray;
}

• This targets placeholders in email and password fields with different colors.

Combining with Other Styles

Multiple Styles:
You can combine color with other styles:

input::placeholder {
    color: purple;
    font-style: italic;
    opacity: 0.7;
}

• This example changes the placeholder text color to purple, makes it italic, and sets its opacity.

Form-wide Styles:
Apply styles to all inputs within a form:

form input::placeholder {
    color: orange;
}

• Targets all placeholder texts within the specified form.

Example with Complete HTML and CSS

HTML:

    <textarea></textarea>

CSS:

form input::placeholder {
    color: blue;
}

form input[type="email"]::placeholder {
    color: green;
}

form textarea::placeholder {
    color: red;
}

• This sets different placeholder text colors for various input fields within the form.

Using CSS Variables for Consistency

CSS Variables:
Define a variable for placeholder color to ensure consistency:

:root {
    --placeholder-color: #888;
}

input::placeholder,
textarea::placeholder {
    color: var(--placeholder-color);
}

• This approach uses CSS variables, making it easier to maintain and update the color consistently.

Theming with CSS

Dark Mode:
Implement different placeholder colors for dark mode:

@media (prefers-color-scheme: dark) {
    input::placeholder {
        color: #ccc;
    }
}

• Uses media queries to change the placeholder color based on the user’s theme preference.

Summary

Changing the placeholder text color in HTML input fields using CSS is straightforward with the ::placeholder pseudo-element. For broader compatibility, especially with older browsers, including vendor prefixes is advisable. This technique allows you to customize the appearance of form elements, providing a better user experience through consistent and visually appealing placeholder text. You can further enhance your styles by using CSS variables for easy updates and theming capabilities, such as implementing dark mode support. This makes your web forms more adaptable and visually cohesive across different environments and user preferences.