WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties