Normalize.css: Placeholders are not consistent in all browsers

[visicode]

IE, Edge and Firefox have different placeholders colors than other browsers
Should add:
:-ms-input-placeholder {
color: #a9a9a9;
}
::-ms-input-placeholder {
color: #a9a9a9;
}
:-moz-placeholder,
::-moz-placeholder {
color: #606060; /* -> #a9a9a9 on display */
}

[jonathantneal]

@Yapaslfeu, great work. Why is that the placeholder in Firefox requires a different color than what is displayed. Are they also using opacity or something?

[visicode]

You're right, there's an opacity set!
For Firefox, should be:
:-moz-placeholder,
::-moz-placeholder {
color: #a9a9a9;
opacity: 1;
}

[jonathantneal]

Fantastic. Why are you including both the invalid : and :: valid pseudo-element selectors?

[visicode]

I kept it for backward compatibility only but we can remove it

[thierryk]

I think the single colon notation : was only relevant to IE8. Also, placeholder is newer than :: for pseudo-elements.

[battaglr]

I think this would be a nice addition.

Regarding compatibility, @thierryk is right, IE8 only supports the single-colon syntax, and only Firefox 18- supports :-moz-placeholder.

[7studio]

In the past, I tried to normalise placeholder according to the styles applied by Firefox:

/* Blink, WebKit, Edge HTML */
::-webkit-input-placeholder {
  color: inherit;
  opacity: .54;
}
/* Gecko */
::-moz-placeholder {
  color: inherit;
  opacity: .54;
}
/* Trident */
:-ms-input-placeholder {
  color: inherit;
  opacity: .54;
}

but IE 11 applies also opacity on the form element itself and does not inherit the color from the form element :sob:
Here is my test: http://codepen.io/7studio/pen/MKVvev

I hope it can help you in your reflexion.

[grantgeard]

There was some discussion a long time ago on the issue with placeholders in https://github.com/necolas/normalize.css/issues/157 but it was eventually closed.

[jonathantneal]

Thanks @grantgeard for contributing to this issue over the years. Did you ever come across a clever way to share the currentColor with a placeholder without running into the bug you described? Is the opacity linked hard-wired to the input -ms-input-placeholder?

[grantgeard]

@jonathantneal I don't think it's possible. IE has implemented :-ms-input-placeholder as :placeholder-shown which the spec describes as a pseudo-class that targets an input element that is currently showing placeholder text. That's why changing the opacity affects the entire element and why the styles aren't applied after the input is focused or a value is entered.

[jonathantneal]

^ @grantgeard, that is very sad, but your explanation provides exactly the information we need to make a decision, so thank you so very much. :)

[XiBOR]

input::-moz-placeholder {
opacity: initial;
}
input::-webkit-input-placeholder {
color: inherit;
}

It's enough for ie10-11, safari8-9, firefox44 and chrome49. (tested by https://www.browserstack.com)

But, if you need opacity, code will be:
input:-ms-input-placeholder {
opacity: 0.54;
}
input::-moz-placeholder {
opacity: 0.54;
}
input::-webkit-input-placeholder {
opacity: 0.54;
color: inherit;
}

[jonathantneal]

Since Edge understands the ::-webkit-input-placeholder, we can normalize Edge, Chrome, and Safari with just one rule.

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

This leaves IE 10-11 untouched, appearing somewhat similar to other browsers, only without the semi-transparency. For these IEs, the effect could be simulated with something like:

:-ms-input-placeholder {
  color: rgba(0,0,0,.54);
}

Those RGB values would need to be based on the known color being specified; so this is something we can leave to authors (or a PostCSS plugin).

[visicode]

I think the IE problem is a big issue for the moment, as it's still used a lot!
Despite all the discussions, i still believe that we have to force the placeholder color to a light grey for the moment, and fix Firefox - the only browser which do it differently - to opacity:1!

Firefox is not necessary right: light silver is like a system color for placeholders, and placeholders with a lighter color than the input text is not so logic in my point of view.

Above all, it's far more easy for one to change all the placeholders colors if needed (i.e. bad readability, which is not so common and immediately visible, even at design phase), than obliging everybody to set the placeholder color with a rgba when changing the fields text color (very common modification), this only for IE 11!!

[visicode]

[https://github.com/necolas/normalize.css/pull/571#issuecomment-208283753]

At least, if you are not convinced by my comment, you need to set the placeholder color for IE, as it doesn't use the text color by default:
:-ms-input-placeholder {
color: inherit;
}