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
- password
HTML Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>How to Style Your Placeholder With Pure CSS</title> </head> <body> <form> <input placeholder="Enter your full name" type="text"><br> <input placeholder="hello@cssanimation.io" type="email"> </form> </body> </html> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Chrome/Opera/Safari */ ::-webkit-input-placeholder { color: green; } /* Firefox 18- */ :-moz-placeholder { color: green; } /* Firefox 19+ */ ::-moz-placeholder { color: green; } /* IE 10+ */ :-ms-input-placeholder { color: green; } |
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 propertiescolorbackground propertiesword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>How to Style Your Placeholder With Pure CSS</title> </head> <body> <div class="container"> <form> <div> <input id="full_name" placeholder="Enter your full name" type="text"> </div> <div> <input id="email" placeholder="hello@cssanimation.io" type="email"> </div> <div> <input placeholder="http://cssanimation.io" type="url"> </div> <div> <textarea placeholder="Enter your message"></textarea> </div> </form> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: green; font-size:14px; } input:-moz-placeholder, textarea:-moz-placeholder { color: red; font-size:14px; } input::-moz-placeholder, textarea::-moz-placeholder{ color: red; font-size:14px; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: red; font-size:14px; } |
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-shownselects the input when placeholder text is being shown but::placeholderonly styles the placeholder text.:placeholder-shownis a pseudo class but::placeholderis 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
|
1 2 3 |
::-mox-placeholder { opacity: 1; } |
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 cssanimation.io team.
