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

mhmadesk

Save to bookmark

2022-05-17

319

Very Easy

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

Css programming,

All Answers

mhmadesk

2022-05-17

need an explanation for this answer? contact us directly to get an explanation for this 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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

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

All Answers

Use vendor prefix CSS properties

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now