CSS – How to Change Placeholder Text?

How to Change Placeholder Text in HTML?

Placeholder text can be changed with the help of the placeholder attribute of the input element.

The text to be displayed in the textbox is placed within the placeholder attribute value.

The placeholder text has to be of lesser size than the textbox or else the complete text will not display.

HTML :-

	<input type="text" placeholder="Sample Text 1"><br><br>
	<input type="text" placeholder="Sample Text 2"><br><br>
	<input type="text" placeholder="Sample Text 3"><br><br>
	<input type="text" placeholder="Sample Text 4"><br><br> 

Result :-

In the HTML section, we have added plain 4 textboxes. In the placeholder attribute, the sample text to be displayed is added.

In the Image, the placeholder text can be seen within the textbox.

How to Change Input Placeholder Color in CSS?

The text color of the placeholder can be changed by ::placeholder CSS.

Placeholder text is by default displayed in light color. We can change this color with the help of CSS.

Lets see the practical demonstration for changing the text color of placeholder.

CSS :-

	::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	   color: red;
	   opacity: 1; /* Firefox */
	}

	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	   color: red;
	}

	::-ms-input-placeholder { /* Microsoft Edge */
	   color: red;
	} 

HTML :-

	<input type="text" placeholder="Sample Text 1"> 

Result :-

In the CSS section, we have added the ::placeholder class & applied the style of color to display in red.

Various different browsers have a unique way to handle the placeholders so we have added additional CSS to handle different browsers.

In the HTML section, we have added plain 4 textboxes. In the placeholder attribute, the sample text to be displayed is added.

In the Image, the placeholder text can be seen in red color as defined in CSS.

Summary

In this post, we have seen How to change the placeholder text along with How to change the text color of the placeholder.

Assuming this helps, Feel free to comment below for any queries.