Web Browser Support For The HTML placeholder Attribute And The CSS *placeholder Selectors On Textboxes And Textareas: Tests And Results

Last reviewed/updated: 22 Jul 2016 | Published: 19 Aug 2015 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

Concerning HTML, textboxes use the input element with the type="text" attribute and textareas use the textarea element. The textbox input element, the textbox input element with the type="text" attribute, and the textarea textarea element are referred to as the textbox/textarea elements. Concerning CSS, the selectors for textboxes are the input type selector and, with more specificity, the input[type="text"] attribute selector, and the selector for textareas is the textarea type selector. The textbox input selector, the textbox input[type="text"] selector, and the textarea textarea selector are referred to as the textbox/textarea selectors.

1.1. The HTML placeholder Attribute

The HTML placeholder attribute is a commonly used optional attribute for textboxes and textareas. The textbox/textarea placeholder attribute value is displayed in the textbox/textarea as temporary placeholder text until, depending upon the web browser, the textbox/textarea receive focus or text is entered into the textbox/textarea.

1.1.1. Web Browser Support For The HTML placeholder Attribute On Textboxes And Textareas

Web Browser Support For The HTML placeholder Attribute On Textboxes And Textareas
Textbox / Textarea Element IE Support ED Support FF Support SF Support CH Support OP Support
  • Textbox input element.
  • Textbox input element with type="text" attribute.
 IE10+ ED12+ FF4+ SF3.1+ CH2+ OP11+
Textarea textarea element IE10+ ED12+ FF4+ SF5+ CH4+ OP11.50+

1.2. The CSS Selectors For Styling The Placeholder Text

The following CSS selectors can be used to style the placeholder text:

  • The previously described textbox/textarea selectors (input, input[type="text"], and textarea).
  • The textbox input[placeholder] attribute selector and the textarea textarea[placeholder] attribute selector. The textbox input[placeholder] selector and the textarea textarea[placeholder] selector are referred to as the textbox/textarea placeholder attribute selectors. The textbox/textarea placeholder attribute selectors are typically not used to style the placeholder text.
  • The web browser vendor prefix pseudo-class selectors (:-ms-input-placeholder and :-moz-placeholder), the web browser vendor prefix pseudo-element selectors (::-ms-input-placeholder, ::-moz-placeholder, and ::-webkit-input-placeholder), and the W3C proposed web browser vendor independent pseudo-element selector (::placeholder). These selectors are referred to as the CSS *placeholder selectors.

The styles of the CSS *placeholder selectors override the styles of the textbox/textarea selectors and the textbox/textarea placeholder attribute selectors.

1.3. The CSS *placeholder Selectors

The CSS *placeholder selectors can be used to style the placeholder text in the following ways:

  • With more specificity, appended to the textbox/textarea selectors. For example, the ::-ms-input-placeholder selector appended to the textbox input selector: 
    input::-moz-placeholder {
  opacity: 0.54;
}
  • With less specificity, as standalone selectors. For example, the ::-webkit-input-placeholder selector as a standalone selector: 
    ::-webkit-input-placeholder {
  color: rgb(169,169,169);
}
    The *placeholder selectors as standalone selectors are equivalent to the *placeholder selectors appended to the universal * selector. For example, the ::-webkit-input-placeholder selector is equivalent to the *::-webkit-input-placeholder selector.

1.3.1. Web Browser Support For The CSS *placeholder Selectors On Textboxes And Textareas

Web Browser Support For The CSS *placeholder Selectors On Textboxes And Textareas
How Used (Appended To / As Standalone) CSS *placeholder Selector IE Support ED Support FF Support SF Support CH Support OP Support
  • Appended to textbox input selector.
  • Appended to textbox input[type="text"] selector.
  • Standalone on textbox input element.
  • Standalone on textbox input element with type="text" attribute.
 :-ms-input-placeholder IE10+ - - - - -
::-ms-input-placeholder - ED12+ - - - -
:-moz-placeholder - - FF4 - 18 - - -
::-moz-placeholder - - FF19+ - - -
::-webkit-input-placeholder - ED12+ - SF4+ CH2+ OP15+
::placeholder - - - - - -
  • Appended to textarea textarea selector.
  • Standalone on textarea textarea element.
 :-ms-input-placeholder IE10+ - - - - -
::-ms-input-placeholder - ED12+ - - - -
:-moz-placeholder - - FF4 - 18 - - -
::-moz-placeholder - - FF19+ - - -
::-webkit-input-placeholder - ED12+ - SF5+ CH4+ OP15+
::placeholder - - - - - -

1.4. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. Web Browser Support For The HTML placeholder Attribute On Textboxes And Textareas: Tests And Results

3. Web Browser Support For The CSS :-ms-input-placeholder Selector On Textboxes And Textareas: Tests And Results

4. Web Browser Support For The CSS ::-ms-input-placeholder Selector On Textboxes And Textareas: Tests And Results

5. Web Browser Support For The CSS :-moz-placeholder Selector On Textboxes And Textareas: Tests And Results

6. Web Browser Support For The CSS ::-moz-placeholder Selector On Textboxes And Textareas: Tests And Results

7. Web Browser Support For The CSS ::-webkit-input-placeholder Selector On Textboxes And Textareas: Tests And Results

8. Web Browser Support For The CSS ::placeholder Selector On Textboxes And Textareas: Tests And Results

9. Resources And Additional Information