Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
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:

<!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="disabled"><p>
        <p><textarea placeholder="disabled" cols="30"></textarea><p>
    </form>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates