Advertisements
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 the <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 the placeholder text, as shown in the following example:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Styling Placeholder Text with CSS</title>
<style>
::-webkit-input-placeholder {
color: orange;
}
:-moz-placeholder { /* Upto Firefox 18, Deprecated in Firefox 19 */
color: orange;
}
::-moz-placeholder { /* Firefox 19+ */
color: orange;
}
:-ms-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
- How to disable a link using only CSS
Advertisements
