In this post, we will learn how to change input placeholder color with CSS. A placeholder is a small text written in the input field. This short text is a hint that guides the user to input the correct data in the input field. So how we can change placeholder text color, we will learn in this post. 


How To Change Input Placeholder Color With CSS ?


Change Input Placeholder Color

To change the input placeholder color, we use the  ::placeholder  CSS selector. This selector helps us to change the placeholder color. By default the placeholder text color is grey in most browsers. In some browsers  ::placeholder   selector does not work properly. So for fix this issue we use some prefix next to placeholder selector. In Firefox browser placeholder text opacity is low so we use    opacity: 1  to fix this issue.  


<!DOCTYPE html>
<html>
<head>
<title>How To Change Input Placeholder Color With CSS ?</title>
<style>

::placeholder {
color: blue;

/*For Firefox Browser only*/
opacity: 1;
}

/* For IE10 and IE11 */
:-ms-input-placeholder {
color: blue;
}

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

</style>
</head>
<body>

<input type="text" placeholder="The placeholder text color changed to blue">

</body>
</html> code-box



Summary

In this post we learned how to change input placeholder color with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post