Categories
css html html-input placeholder

Change a HTML5 input’s placeholder color with CSS

4257

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn’t do anything to the placeholder’s value:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

But Value will still remain grey instead of red.

Is there a way to change the color of the placeholder text?

8

  • 395

    Quick heads-up (not a solution, just a FYI): if I recall correctly, input[placeholder] just matches <input> tags that have a placeholder attribute, it doesn’t match the placeholder attribute itself.

    Apr 9, 2010 at 19:58


  • 15

    Yah, the thought crossed my mind that this may be like trying to style an element’s “title” attribute. So +1 for thinking alike!

    Apr 9, 2010 at 20:01

  • 7

    @MathiasBynens The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text. So it matches <input> tag, like input selector, but showing placeholder text just now. It also doesn’t match the placeholder attribute itself.

    – HEX

    Jan 18, 2016 at 12:55


  • 5

    @HEX It’s not like the input selector because that selects all input elements. :placeholder-shown only selects input elements that are currently showing the placeholder, allowing you to style those elements only, and effectively style the placeholder text. What are you trying to say?

    Jan 19, 2016 at 14:19

  • 3

    @HEX (Of course, it also selected textarea elements that are showing placeholder text.)

    Jan 21, 2016 at 10:18

5035

Implementation

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. [Ref]
  • Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
  • Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. [Ref]
  • Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. [Ref]
  • April 2017: Most modern browsers support the simple pseudo-element ::placeholder [Ref]

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

Usage notes

  • Be careful to avoid bad contrasts. Firefox’s placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
  • Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
  • Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
  • Placeholders are no replacement for labels, so make sure you have a label, too
  • Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

0

    772

    +50

    /* do not group these rules */
    *::-webkit-input-placeholder {
        color: red;
    }
    *:-moz-placeholder {
        /* FF 4-18 */
        color: red;
        opacity: 1;
    }
    *::-moz-placeholder {
        /* FF 19+ */
        color: red;
        opacity: 1;
    }
    *:-ms-input-placeholder {
        /* IE 10+ */
        color: red;
    }
    *::-ms-input-placeholder {
        /* Microsoft Edge */
        color: red;
    }
    *::placeholder {
        /* modern browser */
        color: red;
    }
    <input placeholder="hello"/> <br />
    <textarea placeholder="hello"></textarea>

    This will style all input and textarea placeholders.

    Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).

    0

      311

      You may also want to style textareas:

      input::-webkit-input-placeholder,
      textarea::-webkit-input-placeholder {
        color: #FF9900;
      }
      
      input:-moz-placeholder,
      textarea:-moz-placeholder {
        color: #FF9900;
      }
      <textarea rows="4" cols="50" placeholder="Stack Snippets are nice!">
      </textarea>

      0