Sometimes we need to modify the placeholder styles like color for placeholder, text transformation etc. In this post we can see how this can be done

A browser applies predefined styles to text displayed via the placeholder attribute. By default, the text is a light gray, which can be difficult to read depending on the context.

There was a bit of dashed hope when developers discovered that there were no CSS styling options available for placeholders –– it was the UA styles or nothing. The good news is that the new ::input-placeholder pseudo-element allows us to break out of the UA norm by offering more styling flexibility.

For example, let’s use the following placeholder and change its color and text case:

<input type="text" placeholder="I'm placeholder text!">

We’ll then create a CSS rule using the new pseudo-element:

input::-webkit-input-placeholder {
   color: rgba(0,5,143,.5);
   text-transform: uppercase;
}

::input-placeholder has decent implementation, but for now we’ll need to use vendor prefixes. We are also unable to combine the prefixed selectors into one rule. They each need to be defined separately, otherwise the entire rule will be ignored by the browser.

input::-webkit-input-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input::-moz-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-ms-input-placeholder { 
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}

The Placeholder Attribute Selector
Additionally, we can target input fields entirely based on whether or not they have a placeholder attribute with the [placeholder] attribute selector:

input[placeholder] {
   font-weight: bold;
   border-color: blue;
}

Now, every input field that has a placeholder attribute will have a bold font weight and blue border.

Which properties can we use?
Not all CSS properties are supported in a ::input-placeholder rule. In fact, only a handful are, the most useful ones being:

color
font-size
font-style
font-weight
letter-spacing
line-height
padding
text-align
text-decoration

It’s important to keep in mind that placeholder styles will not resize an input field and will not affect its box model. A line height and padding, for example, will move a placeholder, but too much padding and line height will display the text outside the content area of a field obscuring some parts. The same occurs with font sizes.

input::-webkit-input-placeholder {
   padding-top: 8px;
}

So that’s all about changing style for placeholder ie mainly color for placeholder