How to change input field or textarea placeholder text color using CSS

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 »

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
<meta charset="UTF-8">
```

<title>Styling Placeholder Text with CSS</title>

```
<style type="text/css">
```
```
    ::-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:

Previous Page Next Page

How to change input field or textarea placeholder text color using CSS

Answer: Use vendor prefix CSS properties

Example

Related FAQ

Your Feedback: