Languages
[Edit]
EN

CSS - change input's placeholder color

3 points
Created by:
Aaron1
478

In this article, we would like to show you how to change input's placeholder color using CSS.

To get access to placeholder we should use ::placeholder presudo selector.

Quick solution

Google Chrome (and most modern browsers):

::placeholder {
  color: red;
}

To have better support in older web browsers add additionally:

:-moz-placeholder {           /* Mozilla Firefox 4-18 */
   color:    red;
   opacity:  1;
}

::-moz-placeholder {          /* Mozilla Firefox 19+ */
   color:    red;
   opacity:  1;
}

::-webkit-input-placeholder { /* Blink, WebKit, Edge */
    color:   red;
}

:-ms-input-placeholder {      /* Internet Explorer 10-11 */
   color:    red;
}

::-ms-input-placeholder {     /* Microsoft Edge */
   color:    red;
}

 

Practical example

In this section, we present a runnable example of how to change input's placeholder color in Google Chrome with a legacy for older web browsers.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <style>

      ::placeholder {               /* Google Chrome (and most modern browsers) */
        color: red;
      }
      
      :-moz-placeholder {           /* Mozilla Firefox 4-18 */
         color:    red;
         opacity:  1;
      }

      ::-moz-placeholder {          /* Mozilla Firefox 19+ */
         color:    red;
         opacity:  1;
      }

      ::-webkit-input-placeholder { /* Blink, WebKit, Edge */
          color:   red;
      }

      :-ms-input-placeholder {      /* Internet Explorer 10-11 */
         color:    red;
      }

      ::-ms-input-placeholder {     /* Microsoft Edge */
         color:    red;
      }

    </style>
  </head>
  <body>
    <input placeholder="Placeholder text...">
  </body>
</html>

Some complex selectors

We are able to precise selectors only to specific elements, ids, classes, etc.

input::placeholder {
  color: red;
}

#my-input-id::placeholder {
  color: red;
}

.my-input-class::placeholder {
  color: red;
}
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join