LearnThe CSS3 Placeholder Pseudo-element

Guil Hernandez
writes on March 22, 2013

Share with your friends










Submit

An HTML5 feature that had the web community abuzz with excitement a couple of years ago was the placeholder attribute for displaying placeholder text in input fields. Now that it’s widely supported by modern browsers, there is a lot more we can do with this useful feature, like customize the text’s appearance.

The latest ::input-placeholder CSS pseudo-element gives us a standards-compliant way to style placeholder text, regardless of an input field’s default styles.

Styling Placeholder Text

A browser applies predefined styles to text displayed via the placeholder attribute. By default, the text is a light gray, which can be difficult to read depending on the context.

There was a bit of dashed hope when developers discovered that there were no CSS styling options available for placeholders –– it was the UA styles or nothing. The good news is that the new ::input-placeholder pseudo-element allows us to break out of the UA norm by offering more styling flexibility.

For example, let’s use the following placeholder and change its color and text case:

<input type="text" placeholder="I'm placeholder text!">

We’ll then create a CSS rule using the new pseudo-element:

input::-webkit-input-placeholder {
   color: rgba(0,5,143,.5);
   text-transform: uppercase;
}

::input-placeholder has decent implementation, but for now we’ll need to use vendor prefixes. We are also unable to combine the prefixed selectors into one rule. They each need to be defined separately, otherwise the entire rule will be ignored by the browser.

input::-webkit-input-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input::-moz-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-ms-input-placeholder { 
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}

Check it out in CodePen.

The Placeholder Attribute Selector

Additionally, we can target input fields entirely based on whether or not they have a placeholder attribute with the [placeholder] attribute selector:

input[placeholder] {
   font-weight: bold;
   border-color: blue;
}

Now, every input field that has a placeholder attribute will have a bold font weight and blue border.

Which properties can we use?

Not all CSS properties are supported in a ::input-placeholder rule. In fact, only a handful are, the most useful ones being:

color
font-size
font-style
font-weight
letter-spacing
line-height
padding
text-align
text-decoration

It’s important to keep in mind that placeholder styles will not resize an input field and will not affect its box model. A line height and padding, for example, will move a placeholder,  but too much padding and line height will display the text outside the content area of a field obscuring some parts. The same occurs with font sizes.

input::-webkit-input-placeholder {
   padding-top: 8px;
}
Placeholder text is cut off

Placeholder text is cut off

Browser Support

The ::input-placeholder pseudo-element is currently supported in Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and IE10. Firefox supports both a pseudo-element and a pseudo-class for older versions of Firefox.

Form interaction is an integral part of just about everything we do on the web. So even small enhancement features like this help us make great strides in developing powerful user experiences.

To learn more about new CSS features, take a look at my latest CSS Foundations Deep Dive.

27 Responses to “The CSS3 Placeholder Pseudo-element”

  1. Nice. Thanks, Guil. 😉

  2. I’ve always got excited when I read and understand a tutorial. Your style of writing and example code is really excellent. Explained in easy to understand terms. This article was fantastic.

    Then I encounter what seems to be a road block for me, Browser support.

    Today most of my clients require that their website, thus by projection their template and CSS styling, work across at least five Browsers, Chrome, Firefox, Opera, Safari, and finally IE ( the crappiest of the lot but free with the OS ). Otherwise they do not pay me and that hurts.

    When I read the CSS technique described above I could not quite figure out whether the technique of Pseudo Placeholders worked across all these five Browsers, and degraded sweetly in older versions,

    Perhaps a small table indicating Browser support and degradation would have made this article sublime.

    • Guil Hernandez on March 27, 2013 at 10:02 am said:

      Thanks for reading, Ivan.

      I completely understand what you mean –– everything hinges on browser support.
      Fortunately, the placeholder attribute has decent support (except IE9 down). Take a look at this support table: http://caniuse.com/input-placeholder

      You can use http://modernizr.com/ to detect support for the placeholder attribute, then provide a fallback solution for those browsers that do not support it. There are also simple jQuery plugins for this: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.

      If you are using the CSS pseudo-element, Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6, and IE10 have it covered. But there are currently 2 implementations of this feature: a pseudo-element and a pseudo-class (for FF 4 – 18).

      ::-webkit-input-placeholder { /* WebKit browsers */
      color: blue;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 - 18 */
      color: blue;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: blue;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: blue;
      }

      I wouldn’t worry too much about the older browsers that do not support ::input-placeholder, as it’s just an enhancement feature. Just make sure that you have enough contrast between the placeholder text and input field.

    • Sudeep B. Makwana on June 19, 2013 at 10:33 am said:

      Agreed 100%

  3. Very good. Thanks for sharing.

  4. Thanks Guil! This was the only element I could find that resolved my issue for Firefox 20. Surprised others have not shared this. Great Share!

  5. Ken Snyder on April 27, 2013 at 11:34 pm said:

    It looks like the opacity property is also supported. In Firefox 20, the default ::-moz-placeholder style has opacity at around 50%.

  6. alvito on May 20, 2013 at 12:10 am said:

    Very well explained. Thanks !

  7. Subhash on July 29, 2013 at 7:31 am said:

    It looks like the opacity property is also supported. In Firefox 20, the
    default ::-moz-placeholder style has opacity at around 50%.

  8. 高品質2015シャネル スーパーコピー激安專門店弊社は海外大好評を博くシャネル コピー激安老舗です,2015高品質シャネル バッグ コピー,シャネル 靴 コピー,シャネル 財布 コピー品の品質はよくて、激安の大特価でご提供します。 http://www.okakaku.com/brand-22-copy-0.html

  9. 高品質2015シャネル スーパーコピー激安專門店弊社は海外大好評を博くシャネル コピー激安老舗です,2015高品質シャネル バッグ コピー,シャネル 靴 コピー,シャネル 財布 コピー品の品質はよくて、激安の大特価でご提供します。 http://www.newkakaku.com/wa.htm

  10. スーパーコピーブランド格安販売店はこちらへ!品々の激安価格に持ったスーパーコピーブランド 代引きの新作はお客様に提供されます。安心、迅速、確実、お客様の手元にお届け致します。★弊社は9年の豊富な経験と実績を持っております。★一流の素材を選択し、精巧な作り方でまるで本物のようなな製品を造ります。★品質を重視、納期も厳守、お客様第一主義を貫きは当社の方針です。★驚きの低価格で商品をお客様に提供致します!★早速に購入へようこそ! http://www.bestevance.com/vuitton/index.htm

  11. ロレックスコピー販売、代引きロレックス時計コピー通販、全て新品、高い品質、激安、送料無料。ロレックス時計コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは 業界で最高な品質に挑戦しますロレックコピー,ロレックコピー代引き,ロレック激安,ロレックス偽物 ,最高級ロレックコピーロレックス時計コピー,フェラーリコピー時計,パネライコピー時計,パテックフィリップコピー時計,ヴァシュロン.コンスタンタンコピー時計,エルメスコピー時計,カルティエコピー時計ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ&ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー欧米O級品オーダー服各種のブランドの服、靴、、財布、腕時計の複製品をかばん一番ブランドliveブランドコピー服,ブランドバッグコピー,ブランド時計,ブランド靴シリーズ欧米O級品コーナーラッピング用品 http://www.ooowatch.com/tokei/rolex/index.html

  12. 弊社は海外安心と信頼のプラダ 時計 コピーです。2015 新作が満載!皆様を歓迎して当店をご光臨賜ります。ロレックス時計コピー,パネライ時計コピー,ウブロ時計コピー ,ブライトリング時計コピー,IWC時計コピー,フランクミュラー時 計コピー,ショパール時計コピー,フェラーリ時計コピー,グラハム 時計コピー,ハリー ウィンストン時計コピー等。サイトは世界一流ブランド コピー 専門店です。ぜひ一度当店の商品をお試しください。驚きと満足を保証致します。ご利用をお待ちしております。 http://www.msnbrand.com/brand-copy-IP-2.html

  13. 激安 ブランドスーパーコピー新しいものを販売しています。ルイルイヴィトンコピー、グッチコピー、シャネルコピー、ブランドコピー、ブランドスコピー、ブランドコピー時計などルイヴィトンコピー 激安 ブランド、スーパーコピー、代引き対応、レプリカ、安心通販ルイヴィトン偽物、シャネル偽物、グッチ偽物、エルメス偽物、クロエ偽物、カルティエコピー、オメガコピー、IWCコピー楽天ヴィトンコピー屋 http://www.brandiwc.com/brand-28-copy-0.html

  14. 100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーエルバーキンコピースーパーコピー財布ブランド財布コピーブランドコピー激安バレンシアガ スーパーコピー激安ロレックス スーパーコピー時計ブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーブランド激安市場-jck35販売:ブランド財布コピー,激安ブランド,財布コピー,偽ブランド,偽 ブランド財布,偽物ブランド財布,ブランドコピー,ヴィトンコピー,ルイヴィトン財布偽物, シャネル財布コピー,グッチ財布コピー,エルメス財布偽物,D&G 財布コピー,ボッテガ 財布 .2013年新作スーパーコピーロレックス,スーパーコピーロレックス時計通販スーパー コピー品その他の世界一流ロレックススーパーコピー時計品を扱っています。 ホームページをクリックして商品をご覧下さい.ロレックスコピー,業界No.1人気スーパーコピーロレックス腕時計専門販売ロレックスコピー(ROLEXスーパーコピー)のロレックス レプリカ販売専門店です。すべての商品は品質2年無料保証です,ロレックス デイトジャスト 偽物,人気満点ロレックス コピーn級品新作大特集 http://www.ooowatch.com/tokei/vuitton/index.html

  15. 最も美しいスーパーコピー,超格安ブランド時計コピー激安通販専門店!ブランド品に憧れて、予算オーバーし、諦めなければならないことがありましたか。スーパーコピー品が一番いいチョイスだ思います。少しのお金でも、世界中一番人気を持つブランド品、貴族しか買えない贅沢品がゲットできます。素敵な外観と実用性に優れたブランド コピー バッグ,,スーパーコピー財布,スーパーコピー 代引き,エルメス コピー,ルイヴィトン 財布、ルイヴィトン バッグ、ベルトなどの逸品はお客様に提供します。誰でもブランド品を手に入れられるのは弊社の経営理念です。当店の最大目標はお客様が安心してお買い物が出来き、お客様の頼りになるお店を目指す事ことです。お洒落な貴方はきっとこのチャンスを見逃しなくよ! http://www.brandiwc.com/brand-62-copy-0.html

  16. 激安 ブランドスーパーコピー新しいものを販売しています。ルイルイヴィトンコピー、グッチコピー、シャネルコピー、ブランドコピー、ブランドスコピー、ブランドコピー時計などルイヴィトンコピー 激安 ブランド、スーパーコピー、代引き対応、レプリカ、安心通販ルイヴィトン偽物、シャネル偽物、グッチ偽物、エルメス偽物、クロエ偽物、カルティエコピー、オメガコピー、IWCコピー楽天ヴィトンコピー屋 http://www.bagkakaku.com/rolex_watch.html

  17. 業界最高峰のブランドコピー 激安、コピーブランド、スーパーコピーブランド(N級品)通販専門店!ブランドコピー,コピーブランド,スーパーコピーブランド,ブランドコピー 激安,偽物ブランド、偽物のバッグ、腕時計、財布など激安で買える!全部のスーパーコピー販売品物のなかで私達のブランド激安が一番有名です http://www.bestevance.com/louisvuitton/index_6.html

  18. ブランド激安市場コピーブランドコピー,スーパーレプリカ,ブランド激安市場 女社長 激安 シャネル 財布(CHANEL),グッチ 財布 (GUCCI) 激安,ヴィトン(lv) 新作 財布 激安 ルイヴィトン財布コピー,新作 ブランブランドを特別価格で提供中!ルイヴィトン財布、ルイヴィトンバッグ、ルイヴィトンベルトブランド激安市場ブランドコピー,大人気のルイヴィトン,スーパーコピー,様々な高品質ーパーコピー時計,ブルイヴィトン コピー ブランドレプリカ 激安 ブランド激安市場 ロレックス コピー スーパーコピー ルイヴィトン、シャネル、グッチ、エルメス、クロエ、ブラダ、ブルガリ ドルチェ&ガッバ―ナ、バレンシアガ、ボッテガ.ヴェネタ偽物ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、 http://www.bagkakaku.com/celine_bag.html

  19. スーパーコピーブランド 代引き安心老舗当店は海外高品質のブランドコピー 代引き,スーパーコピー 代引き通販人気老舗です。2015新作 ルイヴィトン コピー代引き、シャネル コピー代引き、 http://www.okakaku.com/brand-8-copy-0-cheap-0-max0-attr0-3-sort_order%20Desc%2cgoods_id-DESC.html

  20. 2015ブランド財布コピールイヴィトン財布コピー,シャネル財布コピー,グッチ財布コピー,エルメス財布コピークロエ財布コピー,ブラダ財布コピー,ブルガリ財布コピー,ドルチェ&ガッバ―ナ財布コピーバレンシアガ財布コピー,ボッテガ.ヴェネタ財布コピーロレックス時計コピー,ブルガリ時計コピー,フランク ミュラー時計コピーシャネル時計コピー,カルティエ時計コピー_オメガ時計コピー,IWC時計コピールイヴィトン時計コピー,オーデマ ピゲ時計コピー,ブライトリング時計コピーコピーブランド、ブランド激安、人気ブランドの販売、通販、オークション、新作のスーパーコピーブランドコピー、韓国スーパーコピー、ブランド激安、偽物ブランド、ブランドバッグ、激安かばん、ルイヴィトン偽物、財布激安.商品は全く写真の通りです。 http://www.msnbrand.com/brand-copy-IP-4.html

  21. 100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーエルバーキンコピースーパーコピー財布ブランド財布コピーブランドコピー激安バレンシアガ スーパーコピー激安ロレックス スーパーコピー時計ブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーブランド激安市場-jck35販売:ブランド財布コピー,激安ブランド,財布コピー,偽ブランド,偽 ブランド財布,偽物ブランド財布,ブランドコピー,ヴィトンコピー,ルイヴィトン財布偽物, シャネル財布コピー,グッチ財布コピー,エルメス財布偽物,D&G 財布コピー,ボッテガ 財布 .2013年新作スーパーコピーロレックス,スーパーコピーロレックス時計通販スーパー コピー品その他の世界一流ロレックススーパーコピー時計品を扱っています。 ホームページをクリックして商品をご覧下さい.ロレックスコピー,業界No.1人気スーパーコピーロレックス腕時計専門販売ロレックスコピー(ROLEXスーパーコピー)のロレックス レプリカ販売専門店です。すべての商品は品質2年無料保証です,ロレックス デイトジャスト 偽物,人気満点ロレックス コピーn級品新作大特集 http://www.gowatchs.com/brand-243.html

  22. Good to know that it is possible to change styles of placeholder, but when I compare it with this example http://css-workshop.com/placeholder-styling-with-css/ few thing has changed since your article was published. But still firefox has problem to interpretate all possible styles for placeholder.

Leave a Reply

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more