Open In App

Change an HTML5 input placeholder color with CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text. In most of the browsers, the placeholder (inside the input tag) is of grey color. In order to change the color of this placeholder, non-standard ::placeholder selectors can be used, which implements the color attribute in that particular selector. This selector varies from browser to browser. For eg, for Google Chrome, Mozilla Firefox, and Opera Browsers, etc, the selectors can be implemented as:

Syntax: 

::placeholder
  • For Internet Explorer:

    :-ms-input-placeholder
  • For Microsoft Edge:

    ::-ms-input-placeholder

Example 1: This code shows the use of ::placeholder selectors in different browsers.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Change Placeholder Color</title>
    <style>
    ::placeholder {
        
        /* Firefox, Chrome, Opera */
        color: blue;
    }
      
    :-ms-input-placeholder {
        
        /* Internet Explorer 10-11 */
        color: red;
    }
      
    ::-ms-input-placeholder {
        
        /* Microsoft Edge */
        color: orange;
    }
    </style>
</head>
  
<body>
      
<p>Change Placeholder Color</p>
  
    <input type="text" placeholder="Enter your Text">
</body>
  
</html>


Output:

  • In Google Chrome:

    chrome

  • In Microsoft Edge:

    edge

  • In Internet Explorer:

    explorer

Note: The placeholder selector is no longer supported by Internet Explorer.

Example 2: This code implements a placeholder selector in the email attribute of the input tag. Placeholder selectors can be applied to any attributes (text, tel, password, and etc) of the input tag, to highlight changes in color in any different attributes. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Change Placeholder Color</title>
    <style>
    input[type="email"]::placeholder {
          
        /* Firefox, Chrome, Opera */
        color: blue;
    }
      
    input[type="email"]:-ms-input-placeholder {
          
        /* Internet Explorer 10-11 */
        color: red;
    }
      
    input[type="email"]::-ms-input-placeholder {
          
        /* Microsoft Edge */
        color: orange;
    }
    </style>
</head>
  
<body>
      
<p>Change Placeholder Color</p>
  
    <input type="email" placeholder="Enter your Email">
</body>
  
</html>


Output:

emailcolor



Last Updated : 08 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads