How to change input field or textarea placeholder text color using CSS
Topic: HTML / CSSPrev|Next
Answer: Use vendor prefix CSS properties
By default, the placeholder text of <input>
field and <textarea>
are displayed in light gray color, and there is no standard CSS property to style them. However, browsers provide some non-standard vendor specific pseudo-elements and pseudo-classes that you can use to customize the appearance of placeholder text, like this:
Example
Try this code »<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styling Placeholder Text with CSS</title>
<style type="text/css">
::input-placeholder {
color: orange;
}
:placeholder { /* Upto Firefox 18, Deprecated in Firefox 19 */
color: orange;
}
::placeholder { /* Firefox 19+ */
color: orange;
}
:input-placeholder {
color: orange;
}
</style>
</head>
<body>
<form>
<p><input type="text" placeholder="Please Enter your Name"><p>
<p><textarea placeholder="Please Enter your Comment" cols="30"></textarea><p>
</form>
</body>
</html>
Related FAQ
Here are some more FAQ related to this topic:
- How to disable spell checking in HTML forms
- How to change the default text selection color in the browsers using CSS