CSS3 Placeholder Styling + jQuery Plugins to Enable Placeholders in IE

HTML5 placeholders do not work in Internet Explorer Browsers, prior to IE10. Here are some solutions I tested:

This scripts will add placeholder class in IE to our input or textarea fields.

CSS styling for placeholders should be as follows:

::-webkit-input-placeholder {
 color: #aaa;
}
:-moz-placeholder {
 color: #aaa;
}
:-ms-placeholder {
color: #aaa /* ie10 */
}
.placeholder {
	color:#aaa /* for ie with jquery */
}

Then you can also disable Safari appearances:

input {
	-webkit-appearance: none;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none;
}
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

One Response to CSS3 Placeholder Styling + jQuery Plugins to Enable Placeholders in IE

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">