Last updated on February 25, 2018
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.
/* all */
::-webkit-input-placeholder { /* Webkit */
color: orange;
}
:-moz-placeholder { /* Firefox 18-4 */
color: orange;
}
::-moz-placeholder { /* Firefox 19+ */
color: orange;
}
:-ms-input-placeholder { /* IE10+ */
color: orange;
}
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
.field::-webkit-input-placeholder { color: green; }
.field:-moz-placeholder { color: green; }
.field::-moz-placeholder { color: green; }
.field::-ms-input-placeholder { color: green; }
.field2::-webkit-input-placeholder { color: red; }
.field2:-moz-placeholder { color: red; }
.field2::-moz-placeholder { color: red; }
.field2::-ms-input-placeholder { color: red; }
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.
wpDiscuz