With CSS you can change the style of placeholder text in form and search fields, the placeholder HTML 5 form attribute is supported in the latest browser versions, how you get text pre-populated in an input field and use the placeholder attribute is explained here.
You can change how the placeholder text style looks in the browser via CSS by default using the ::input-placeholder pseudo selector…
By default the CSS styling in browsers is a small font with a light grey coloring, you can change this by using the CSS dynamic pseudo selectors, which will cover the major browsers Safari, Chrome, Firefox and IE…
::-webkit-input-placeholder {
font-size: 14px;
color: #d0cdfa;
text-transform: uppercase;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
:-moz-placeholder { /* older Firefox*/
font-size:14px;
color: #d0cdfa;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
::-moz-placeholder { /* Firefox 19+ */
font-size: 14px;
color: #d0cdfa;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
:-ms-input-placeholder {
font-size: 14px;
color: #d0cdfa;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
So in the example above a few of the CSS rules are restyling the default text font size, color and alignment.
The CSS style properties you can use with input-placeholder are:
- color
- font-size
- font-style
- font-weight
- letter-spacing
- line-height
- padding
- text-align
- text-decoration
You may need to add in the !important declaration to override some of the browsers settings.
For the regular input field text styling just use the input element.
Placeholder text is not supported on IE8 and earlier however including a polyfil javascript solution can support those browsers. I have also created a plugin for its use in WordPress.