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
::placeholderis 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-shownis 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.