Revisions to Change an HTML input's placeholder color with CSS

mentioned that placeholder != label

Source Link

edited Jul 5, 2022 at 12:41

Andy

5.8k
2
31
52

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:

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.
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:

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:

Added highlight to the most straightforward answer

Source Link

edited Jan 7, 2018 at 14:00

hitautodestruct

20.5k
13
72
94

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]Most modern browsers support the simple pseudo-element ::placeholder ^[Ref]

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]

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]

Rewrite the last edit to fit it better into the current format of the post.

Source Link

edited Nov 21, 2017 at 14:52

fuxia

63.4k
6
55
63

Implementation (April, 2017)

The appropriate pseudo selector to style a placeholder is ::placeholder

Usage:

/* Supported by all modern browsers:
 * Chrome 57+, Firefox 51+, Safari 10.1+, Android 57+, iOS 10.3+ */

::placeholder { color: #fac3bc; }

See support stats.

If you need to support IE/Edge see below.

Old 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]

::-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!">

Implementation (April, 2017)

The appropriate pseudo selector to style a placeholder is ::placeholder

Usage:

/* Supported by all modern browsers:
 * Chrome 57+, Firefox 51+, Safari 10.1+, Android 57+, iOS 10.3+ */

::placeholder { color: #fac3bc; }

See support stats.

If you need to support IE/Edge see below.

Old 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]

::-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;
}

<input placeholder="Stack Snippets are awesome!">

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]

::-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!">

Added update for using selector on modern browsers

Source Link

edited Nov 21, 2017 at 12:55

hitautodestruct

20.5k
13
72
94

Loading

added `::-ms-input-placeholder` for microsoft edge

Source Link

edited May 11, 2017 at 15:10

fuxia

63.4k
6
55
63

Loading

Rollback to Revision 28

Source Link

edited Mar 27, 2016 at 20:10

fuxia

63.4k
6
55
63

Loading

Mention the standard :placeholder-shown

Source Link

edited Jan 6, 2016 at 16:44

Mathias Bynens

147.9k
52
221
249

Loading

separated the references from the actual pseudo classes codes so that it will be easier for developers/readers to copy-paste the presented pseudo classes; Also, rewrote a link text

Source Link

edited Dec 8, 2015 at 15:00

Abel Callejo

14.5k
10
72
91

Loading

separated the references from the actual pseudo classes codes so that it will be easier for developers/readers to copy-paste the presented pseudo classes; Also, rewrote a link text

Source Link

edited Dec 8, 2015 at 14:55

Abel Callejo

14.5k
10
72
91

Loading

Correction about IE9

Source Link

edit approved Jul 31, 2015 at 23:02

mnsth

2.3k
1
19
22

Loading

Microsoft Edge is tested - :-ms-input-placeholder does not work, ::-webkit-input-placeholder does. Microsoft Edge has switched to ::-webkit-input-placeholder

Source Link

edit approved Jul 31, 2015 at 19:07

mnsth

2.3k
1
19
22

Loading

Updated the link to the new Mozilla format to point to the MDN page like the rest, rather than the Bugzilla page, since it's been implemented for a while. Also updated IE versions

Source Link