Skip to content
Related Articles

Related Articles

Change an HTML5 input placeholder color with CSS

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 08 Nov, 2021
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!