HTML5 Placeholder Styling With CSS

Let's here i will share with you interesting CSS style properties of INPUT placeholder. Let me show you how to style placeholder text within INPUT elements with some unique CSS code.


The HTML Markup

	<input type="search" placeholder="Search1">
	<input type="password" placeholder="Enter Your Password" value="">
	<input id="searchfield3" type="search" placeholder="Search3">


		/* all */
		::-webkit-input-placeholder {color:red;}
		::-moz-placeholder {color:red;} /* firefox 19+ */
		:-moz-placeholder {color:red;}
		:-ms-input-placeholder {color:red;} /* ie */
		/* password field2 */
		input[type="password"]::-webkit-input-placeholder {color:green;}
		input[type="password"]::-moz-placeholder {color:green;} /* firefox 19+ */
		input[type="password"]:-moz-placeholder {color:green;}
		input[type="password"]:-ms-input-placeholder {color:green;} /* ie */
		/* Search field3 */
		#searchfield3::-webkit-input-placeholder {color:#FFF; background:blue;}
		#searchfield3::-moz-placeholder {color:#FFF; background:blue;} /* firefox 19+ */
		#searchfield3:-moz-placeholder {color:#FFF; background:blue;}
		#searchfield3:-ms-input-placeholder {color:#FFF; background:blue;} /* ie */

You will only want to employ the most basic of styles to the placeholder. Color, font-style, and font-variant are probably the styles you will want to employ. Note that Mozilla Firefox doesn't support placeholder styling until version 4

Try Your Self Download

  • Share
  • Copyright 2016 by All Rights Reserved.