Home / Articles / Programming languages / Markup languages / HTML & CSS / HTML5: placeholder attribute with cross-browser support

HTML5: placeholder attribute with cross-browser support

HTML5: placeholder attribute with cross-browser support
 
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


The most pleasant innovation in HTML5 is its ability to display default text inside an input field and a text area. This became possible with introduction of placeholder attribute in HTML5.

Default text is taken from placeholder attribute and displayed inside an input field or a text area as long as it's empty; the default text disappears when the input field or text area gets focus.

The following input types are compatible with the placeholder attribute: text, search, url, tel, email, and password.

The placeholder attribute is supported in Internet Explorer 10, Firefox 4.0+, Opera 11.0+, Chrome 4.0+, Safari 4.0+, iOS and Android.

Here is an example:

<input type="text" name="name" placeholder="Your full name">
<input type="email" name="email" placeholder="Your email">
<input type="url" name="url" placeholder="Your website">
<input type="tel" name="tel" placeholder="Your telephone number">
<input type="password" name="password" placeholder="Your password">
<input type="search" name="search" placeholder="Search">
<textarea name="message" placeholder="Your message"></textarea>

Live demo

Cross-browser support

The placeholder attribute is not supported by all browsers, especially old ones. To make it work in all browsers, JavaScript can be used. 

jQuery Placeholder plugin does it perfectly. The plugin is very simple in use; it checks automatically if browser has a native support of HTML5 placeholder attribute for input and textarea tags. If it does, the plugin doesn't do anything. But, if the placeholder attribute is only supported by input tags, then the plugin does nothing about input tags and is applied to textarea tags exclusively. And, of course, in the case when both tags don't support the attribute then the plugin is applied to input and textarea tags.

To use the plugin, JavaScript files with jQuery and the plugin must be downloaded and added to the HTML page.

Both files can be downloaded from jQuery official site:

Add the following code to HTML page (for example inside head tag):

<script src="jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.placeholder.min.js" type="text/javascript" charset="utf-8"></script>

After this operation the placeholder attribute will work perfectly in all browsers.

Live demo

Checking if a browser natively supports placeholder attribute

This can be done by using JavaScript. So, the jQuery Placeholder plugin can be used for this purpose.

First the plugin must be added to HTML page as described above. After this, the following JavaScript code checks browser support for both tags (input and textarea). Insert this code after adding jQuery and the plugin to HTML page:

<script type="text/javascript">
  jQuery( document ).ready(function() {
    if( jQuery.placeholder.input ) {
      alert( 'Your browser supports placeholder attribute for input tags natively' );
    } else {
      alert( 'Your browser does not support placeholder attribute for input tags natively' );
    }
    if( jQuery.placeholder.textarea ) {
      alert( 'Your browser supports placeholder attribute for textarea tags natively' );
    } else {
      alert( 'Your browser does not support placeholder attribute for textarea tags natively' );
    }
  });
</script>

After loading the page the script above shows the user two messages. Those messages will inform the user for which tags there is a browser support of the placeholder attribute.

Live demo

Styling default text from placeholder attribute

It can be implemented by using pseudo-elements and pseudo-classes in CSS.

  • WebKit and Blink (Safari, Google Chrome, Opera 15+) use a pseudo-element ::-webkit-input-placeholder.
  • Mozilla Firefox from 4 to 18 uses pseudo-class :-moz-placeholder.
  • Mozilla Firefox 19+ uses pseudo-element ::-moz-placeholder.
  • Internet Explorer 10 uses pseudo-class :-ms-input-placeholder.

Internet Explorer up to version 9 and Opera up to version 12 don't support any CSS selector for default text from the placeholder attribute.

To change text color, use the following CSS styles:

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

As can be seen from the styles above, all CSS selectors are separated. They can't be set as a group of selectors, because they will be ignored by browsers. This happens because if one of the selectors is invalid then styles for the whole group are ignored. In this specific case only one selector for each browser is valid, the rest of them are invalid.

In case when browser doesn't support the placeholder attribute, jQuery Placeholder plugin will add "placeholder" class for input and textarea tags. So, CSS styles will look like this:

.placeholder {
  color: #0182C4;
}

Live demo


 

Read also

The HTML5 hype - is Flash really dead?

The HTML5 hype - is Flash really dead?

Form validation in HTML5

Form validation in HTML5

New types of element input in HTML5

New types of element input in HTML5

Forms in HTML5

Forms in HTML5

Discussion (total 3 comments)

Altaf Hussain
November 11, 2013 at 05:06 am
Html5 has made things easy for web developers and designers. Placeholder is one nice thing it has added. But still not fully supported by all browsers. This article will surely help to implement placeholder attribute on all browsers. Many thanks
Shrikant
January 29, 2014 at 02:45 am
what about cross-browser support to type "password"
Administrator User
Administrator User
January 29, 2014 at 05:54 am
Shrikant, what did you mean? The cross-browser example (the last one in this article) works fine in IE7.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation