A

5

45

I am getting some problem in applying placeholder css.

I am trying to apply css (i.e. color:#898F9C;) on input-box placeholder using pseudo-class selector :-ms-input-placeholder, but it's not working in IE.

Demo

After some hit and try, I get solution of my problem, but it's amazing.

If i removed the default css/style color on input-box, placeholder css working properly in IE(It's amazing behavior of Internet Explorer).

My default css/style:

#search
{
    color:blue;
}

Working-fiddle without input-box default css

My question is, why it's not working with default CSS in IE?

Alber answered 5/3, 2014 at 13:23 Comment(1)

possible duplicate of overriding placeholder font css in all browsers – Semiporcelain 26/2, 2015 at 20:27

S

28

Further to what Raj answered, when using vendor prefixes the selectors need to be separated into their own rule sets for each prefix.

The reason for this is that to enable the CSS language to advance, browsers need to drop selectors or declarations they do not understand. This allows new features to be be added without the worry that old browsers will interpret it in a different way other than just dropping it.

When using the comma combinator to combine the various pseudo classes, you turn it into one selector, and the browser needs to understand the entire thing to apply that rule set.

Instead you should make a new rule set for each vendor prefixed pseudo class/element. Unfortunately it is a lot of repetition, but that is the price for using experimental CSS.

Sarisarid answered 8/10, 2014 at 8:0 Comment(1)

Although Stackoverflow karma punishes you for it, this really should be an Edit to Raj's answer not a separate answer. – Langille 1/12, 2015 at 23:27

D

94

In general, when styling placeholders

When encountering an unsupported vendor prefix, CSS parsing engines will consider the entire rule invalid, which is why a separate ruleset for each vendor prefix is required. Additionally, I found that IE11 requires the !important flag to override the default user agent styles:

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile 12-12.1
   - Android Browser 2.1-4.4.4
   - Samsung Internet ≤6.2
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Pseudo-Elements Level 4 Editor's Draft
   - Browsers not mentioned in vendor prefixes
   - Browser of newer versions than mentioned in vendor prefixes */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

Only IE11 seems to need the !important flag.

Check browser support at CanIUse

The solution for your particular problem

In your example you would need these rulesets for IE11:

#search:-ms-input-placeholder {
    color: #898F9C !important; /* IE11 needs the !important flag */
}

/* (...) Other vendor prefixed rulesets omitted for brevity */

#search::placeholder {
    color: #898F9C;
}

Disoblige answered 14/6, 2015 at 9:12 Comment(5)

Is there anything else? I can't get the placeholder to show in IE 11 at all, even with these settings. It works in all other browsers. I hate IE, and hate even more that everyone uses it. – Hide 21/6, 2017 at 15:45

Oh - it has something to do with the document mode. If I change the document mode to 10 and back to edge, then it works. I hate document mode. – Hide 21/6, 2017 at 15:53

Then remember to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to <head>. Also, use the HTML 5 doctype, i.e. <!DOCTYPE html>. – Disoblige 22/6, 2017 at 20:53

@LarsGyrupBrinkNielsen !important solved the problem in IE11 :) thanks – Bearable 22/6, 2018 at 10:42

Knowing about the need for !important for IE11 has solved an issue for me. – Quelpart 29/1, 2020 at 18:4

S

28

Further to what Raj answered, when using vendor prefixes the selectors need to be separated into their own rule sets for each prefix.

The reason for this is that to enable the CSS language to advance, browsers need to drop selectors or declarations they do not understand. This allows new features to be be added without the worry that old browsers will interpret it in a different way other than just dropping it.

When using the comma combinator to combine the various pseudo classes, you turn it into one selector, and the browser needs to understand the entire thing to apply that rule set.

Instead you should make a new rule set for each vendor prefixed pseudo class/element. Unfortunately it is a lot of repetition, but that is the price for using experimental CSS.

Sarisarid answered 8/10, 2014 at 8:0 Comment(1)

Although Stackoverflow karma punishes you for it, this really should be an Edit to Raj's answer not a separate answer. – Langille 1/12, 2015 at 23:27

H

23

the definitions need to be seperated.

eg:

#search
{
    color:blue;
}

#search::-webkit-input-placeholder {
   color: red;
}

#search:-moz-placeholder {
   color: red;
}

#search::-moz-p {
   color: red;
}

#search:-ms-input-placeholder {
   color: red;
}

See here: http://jsfiddle.net/DLGFK/203/

Hattiehatton answered 2/10, 2014 at 15:30 Comment(5)

Hi Raj Parmar, it is not working for internet explorer 9.Is there any thing to change to get it on ie 9. – Heriberto 3/3, 2015 at 12:2

@Heriberto - Internet Explorer 9 and lower does not support the HTML5 placeholder attribute at all - because of this, placeholder text won't be seen, and of course, can't be styled. – Sigismond 1/8, 2015 at 5:41

Yucky. Setting the opacity there would affect the whole element. Solution for that is color: transparent (or argb) – Carlist 18/10, 2016 at 9:22

@Tom, who's talking about opacity? – Hattiehatton 18/10, 2016 at 13:47

@RajParmar nobody. Your solution works just fine. But I wanted it to work with opacity and not with color: red :p – Carlist 18/10, 2016 at 14:30

J

2

If someone came here because he can not change the font-size - Currently font-size for Placeholder is not supported on IE and Edje. it does not seem they are going to fix it any time soon. Issue #11342294

Jorgenson answered 26/9, 2018 at 9:6 Comment(0)

R

0

I recommend using Autoprefixer to generate the correct output

Input

input::placeholder {
    color: red;
}

Output

input::-webkit-input-placeholder {
    color: red;
}
input::-moz-placeholder {
    color: red;
}
input:-ms-input-placeholder {
    color: red;
}
input::-ms-input-placeholder {
    color: red;
}
input::placeholder {
    color: red;
}

Recursion answered 2/7, 2020 at 14:45 Comment(0)

In general, when styling placeholders

The solution for your particular problem

Recommended topics

Hot tags