Changing color of placeholder text using CSS

Changing color of placeholder text using CSS

1 min. read

Placeholder attribute

Placeholder attribute is used to specify the text that is displayed inside the text box(eg. input type text or textarea) when it is empty. Placeholder text is light grey in color by default and gives a hint to user about what data to be typed in the text box.

Placeholder text disappears when something is typed in the text box.

HTML markup

<input type="text" placeholder="Type your name" class="inputBox">
<textarea placeholder="Write down your success story..." class="inputBox"></textarea>

CSS rules

.inputBox::-webkit-input-placeholder
{ 
	/* For Google Chrome */
	color: #00AD7A;
}

.inputBox:-ms-input-placeholder
{ 
	/* For IE 10+ */
	color: #00AD7A;
}

.inputBox::-moz-placeholder
{ 
	/* For Firefox 19+ */
	color: #00AD7A;
	opacity: 1;
}

.inputBox:-moz-placeholder
{ 
	/* For Firefox 4 - 18 */
	color: #00AD7A;
	opacity: 1;
}

Demo fiddle

Write comments