CSS placeholder style

CSS input and textarea ::placeholder pseudo element can be used to add a placeholder text in input element. The text is set using input element attribute placeholder. The placeholder text can be styled using css placeholder pseudo element (or pseudo class in some browser). Note that pseudo class uses single colon (:) whereas pseudo element uses double colon (::) syntax. The support for css placeholder pseudo element is still prefix based in browsers (as on Feb 19, 2016).

css-selector-placeholder

input placeholder css example

<style type="text/css">
.foo::-webkit-input-placeholder { /* chrome/opera/safari/edge */
  color:   lightblue;
}
.foo::-moz-placeholder { /* Firefox */
  color:  lightblue;
}
.foo:-ms-input-placeholder { /* IE 10+ */
  color:  lightblue;
}
</style>
<input class="foo" type="text" placeholder="Colored placeholder text">
<input type="text" placeholder="Placeholder text">
refresh

textarea placeholder css example

<style type="text/css">
::-webkit-input-placeholder { /* chrome/opera/safari/edge */
  color:   lightblue;
}
::-moz-placeholder { /* Firefox */
  color:  lightblue;
}
:-ms-input-placeholder { /* IE 10+ */
  color:  lightblue;
}
</style>
<textarea placeholder="Textarea placeholder text" cols=40 rows=5>
</textarea>
refresh

Specification and Browser compatibility

SpecificationStatusCategories
::placeholder CSS pseudo-elementW3C Working DraftCSS
Desktop
ChromeFirefoxIEEdgeSafariOpera
Partial 4+ (with prefix)Yes 19+ (with prefix)Partial 10+ (with prefix)Partial 12+ (with prefix)Partial 5+ (with prefix)Partial 15+ (with prefix)
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Partial 47+ (with prefix)Yes 44+ (with prefix)Partial 4.2-4.3+ (with prefix)Partial 10+ (with prefix)Partial 33+ (with prefix)
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments