How to change an HTML5 input placeholder color with CSS?

In this tutorial, we will learn how to change an HTML5 input placeholder color with CSS. Learn with the help of examples. By Shahnail Khan Last updated : July 11, 2023

Do you want to make your website or web page stand out from other websites and be a successful frontend web developer? Well, the HTML code alone won't work, you need to style by using various properties of CSS. There are many attributes and selectors available in CSS which are used to style HTML5 elements, making it look more user-friendly. Different CSS selectors are used to target elements in HTML5 for changing text color, font, font size, text alignment, and many more. This article has got you covered on how to change an HTML5 input's placeholder color with CSS?

HTML5 input placeholder

The placeholder attribute is used in HTML5 to suggest users on entering the correct syntax through an illustration of an example. The format is displayed by the browser before the user enters a value. It is mostly used with <input> element of HTML where the user enters name, age, contact no, etc.

The syntax is something like this:

<input type="text" placeholder="Enter your name">

Change an HTML5 input placeholder color with CSS

For implementing the change or designing the placeholder attribute, a CSS selector, namely, a placeholder selector is used. It is used in altering placeholder text by changing text color, font, font size, etc. We will specifically talk about changing the placeholder's input color.
The default color of placeholder text is "grey" in most browsers. In case you want to change the color of placeholder text color, the syntax is:

:: placeholder{
	color: brown; /*You can add the color of your choice*/
}

Well, this syntax is valid for most browsers like Google Chrome, Opera, Firefox, etc. For Microsoft Edge, in place of ::placeholder, you have to write ::-ms-input-placeholder.

Let's understand this through a code.

Example 1: Change the color of HTML input placeholder

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Placeholder Color</title>
      <style>
         ::placeholder{/* syntax for Chrome,Firefox,Mozilla browsers*/
         color:purple;
         }
      </style>
   </head>
   <body>
      <p>Enter your name</p>
      <input type="text" placeholder="Text only">
   </body>
</html>

Output:

The following code is written in VS Code. As you can see, ::placeholder selector is used in Style CSS to change the placeholder text color to purple. We have used the <input> tag to enter the text. It will only accept letters and for user convenience, the placeholder attribute is also used.

Example 2: Change the color of HTML input placeholder

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Placeholder2</title>
   </head>
   <style>
      ::placeholder{
      color: blue;
      }
   </style>
   <body>
      <h2> Fill the form</h2>
      <form>
         <input type="text" placeholder="Enter your name"><br>
         <input type="number" placeholder="Enter your age"><br>
         <input type="email" placeholder="Enter your email-id">
      </form>
   </body>
</html>

Output:

Here, we first created a Form in HTML. The <form> tag is used to create a form in HTML5. The color of the placeholder text is changed for all the three <input> elements in form using ::placeholder selector.

CSS Examples »

CSS - Create and Apply CSS for All Buttons on the Page

How do I center <div> tag using CSS?