Related Articles

Related Articles

Change an HTML5 input placeholder color with CSS
  • Difficulty Level : Basic
  • Last Updated : 04 Dec, 2018

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
emailcolor




My Personal Notes arrow_drop_up
Recommended Articles
Page :