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: #ccc;
}

:-moz-placeholder {
   color: #ccc;  
}

::-moz-placeholder {
   color: #ccc;  
}

:-ms-input-placeholder {  
   color: #ccc;  
}

.placeholder {
	color:#ccc/* 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

  1. Interesting fix. I wrote a similar IE Placeholder Fix

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="">

Current ye@r *