Skip to content
Related Articles

Related Articles

Improve Article

Change an HTML5 input placeholder color with CSS

  • Difficulty Level : Basic
  • Last Updated : 02 Jul, 2021

In most of the browsers, the placeholder (in input tag) is of grey color, to change the color of this placeholder, non-standard ::placeholder selectors can be used, by which implement the color attribute in that particular selector.
This selector can change browser to browser, example
For Chrome, Mozilla, and Opera Browsers, selectors can be implemented as 
 

::placeholder

For Internet Explorer selectors can be, 
 

:-ms-input-placeholder

For Internet Edge, it can be, 
 

::-ms-input-placeholder 

Examples:
HTML Code 1
This code shows the use of Placeholder selectors in different browsers 
 

html




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

Output: 
 



  • In Google Chrome 
     

chrome

  • In Internet Edge 
     

edge

  • In Internet Explorer 
     

explorer

HTML Code 2
This code implements placeholder selector in email attribute of input tag. Placeholder selectors can be apply to any attributes (text, tel, password, and etc) of input tag, to highlight change in color in any different attributes. 
 

html




<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder Color</title>
</head>
<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>
<body>
     
<p>Change Placeholder Color</p>
 
    <input type="email" placeholder="Enter your Email">
</body>
</html>

Output: 
 

emailcolor

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
     

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :