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:

• Placeholder script to use with Modernizr & jQuery (not good with passwords)
• Placeholder with jQuery only

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;
   opacity: 1; /* by default Firefox has lower opacity */
}

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