A simple guide to the placeholder attribute

So, a lot of people (beginners) starting out in tech (in the field of web development) have no idea that they can actually style a placeholder text that is commonly found in the input fields of the form element.

In this short guide, I'd go over the basics of this particular attribute.

Content

The difference between ::placeholder and :placeholder-shown

  • ::placeholder is a pseudo-element, and a pseudo-element is a type of element that is not visible in the DOM.

NB: the ::placeholder pseudo-element wraps the actual placeholder text.

Remember how you can create additional entities in a single element Adiv element to be precise. Where all you have to do is, add either the ::before and ::after pseudo-element to add the desired entity. That is a typical example of what a pseudo-element does.

div::before {
 content: "";
 position: absolute;
 height: 50px;
 width: 50px;
}
  • :placeholder-shown is a pseudo-class. What it does is to select any input element that currently has a placeholder attribute in it.

The text-overflow property simply helps in the formatting of the input placeholder, whenever the placeholder text is too long, it appends ... to the text instead of showing the full text.

CSS properties that it takes

The placeholder attribute supports some CSS properties like:

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

Thank you for reading this short guide, kindly share it with your peers. You can also play with the pen by trying out the properties I listed above.

Comments (2)

Olowolowo Timilehin's photo

Awesome!!! Well detailed 👌🏽

Caleb Olojo's photo

Thank you! 😊