Styling Placeholder Text with CSS

Styling placeholder text for input fields on your websites is rather difficult without the proper tools. Placeholder text is currently only used with a few browsers, but you will want to use the following code to address each browser.

Use the following four vendor prefixes SEPARATELY (a comma delineated list will break on any browser that doesn’t recognize the prefix prior to the one that it uses):

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

::-webkit-input-placeholder {
color: #2F717F;
font-size: 11px;
}

:-moz-placeholder { /* Firefox 18- */
color: #2F717F;
font-size: 11px;
}

::-moz-placeholder { /* Firefox 19+ */
color: #2F717F;
font-size: 11px;
}

:-ms-input-placeholder {
color: #2F717F;
font-size: 11px;
}