Placeholder styling with CSS

By default, placeholder text in inputs has a light gray color(if the browsers support) and which appears in an input field until the user puts focus on the field. Placeholder text is a hint or prompts to users as the format or type of information they need to enter. You will need vendor prefix CSS properties which enables you to style the placeholders however you want.

The Following properties you can use on input-placeholder:

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

Be aware that these cannot be combined so must be written out individually.

The above lines will change all of your placeholder text colors to ‘orange’, if you want to apply individual styles, you can do that too as shown below

You may need to add in the !important declaration to override some of the browser’s settings.

Browser Support

The ::input-placeholder pseudo-element is currently supported in Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and IE10. Firefox supports both a pseudo-element and a pseudo-class for older versions of Firefox.

For older browser by including a polyfil javascript you can get browsers support.

Reference links

By Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.

1 reply on “Placeholder styling with CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *