Languages
[Edit]
EN

CSS - change input's placeholder color

3 points
Created by:
Aaron1
318

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;
}


/* or */

input::placeholder {
  color: red;
}

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

.my-input-class::placeholder {
  color: red;
}

Other:

:-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.

// ONLINE-RUNNER:browser;

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

      ::placeholder {
        color: red;
      }

    </style>
  </head>
  <body>
    <input placeholder="Placeholder text...">
  </body>
</html>
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