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

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

Arjun
I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.
DMCA.com Protection Status