How to Style Your Placeholder With Pure CSS

Placeholder is an attribute that is using in an input field of an HTML form. This actually specifies a short hint which means the desired value of a particular input field to the user. As like – can use a short description or sample value according to the expected format. This hint is displayed in the input field and also disappearing when the field is focused by the user.

Placeholder is used for the following input types –

  • text
  • search
  • url
  • tel
  • email
  • password

HTML Example

Most of the browsers render the placeholder text color with a grey color. To style, your placeholder attribute’s text, ::placeholder pseudo element allows you to style and customize the placeholder text. By default, placeholder text has a light gray color in most browsers and you can style that text with a vendor-prefixed selector.

CSS Syntax

That syntax is not standard, because of the ::placeholder pseudo-element is still an experimental technology and :placeholder-shown is standard.

Supported Styles

The pseudo element supports styling of these properties:

  • font properties
  • color
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity



Demo on CodePen

See the Pen How to Style Your Placeholder With Pure CSS by Pavel (@bdpavel) on CodePen.light

Difference between :placeholder-shown and ::placeholder

  • :placeholder-shown selects the input when placeholder text is being shown but ::placeholder only styles the placeholder text.
  • :placeholder-shown is a pseudo class but ::placeholder is a pseudo element.

Firefox placeholder color

The placeholder color is looking fade when compared to other browsers. This is because all placeholders are Firefox have an opacity value by default. So in order to fix this issue, we need to reset the opacity to value 1.

Follow the code below to resolve Firefox fade issue

So, with the above discussion, we believe you will now able to style your placeholder with pure CSS without writing any jQuery or JavaScript.

That’s all for today. Thanks for being with the team.