Sometimes the default light gray placeholder color isn’t suitable for our needs.

It is really easy to fix it, however the workaround doesn’t work with Opera (but who cares, Opera’s burying Presto and moving to Webkit) and Internet Explorer < 10.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* webkit browsers */
::-webkit-input-placeholder {
  color: #24a396;
  opacity: 1;
}

/* gecko browsers */
::-moz-placeholder {
  color: #24a396;
  opacity: 1;
}

/* IE 10 */
:-ms-input-placeholder {
  color: #24a396;
  opacity: 1;
}

As you can see I also added opacity property to make it look exactly the same in all supported browsers.

You can ask yourself “Why couldn’t I write more space-efficient solution like this?”:

1
2
3
4
5
6

::-moz-placeholder,
::-webkit-input-placeholder,
:-ms-input-placeholder {
  color: #24a396;
  opacity: 1;
}

When a browser doesn’t understand a selector, it invalidates the entire line of selectors. So that’s why.

Result in Firefox: