Placeholder - element of the input field where you can place a hint. When the user begins to enter data, the help text disappears so as not to interfere. Each browser has its own opinion about how this element should be displayed, and sometimes the default styles break the whole design. To manage them, you need to use a special CSS rule placeholder.
Where is the placeholder?
The problem is that the input field tooltip is safely hidden in the shadow DOM and is not easy to get to. For this, a special non-standard CSS pseudo-element::placeholder is used. It can be used to control the tooltip properties.
Styling placeholder in CSS looks like this:
input::placeholder { color: red; opacity: 1 font-style: italic; }
Browser support
The CSS placeholder pseudo-element is handled well by all modern browsers, but to support older onesbrowsers can use prefixes:
- ::-webkit-input-placeholder - for webkit browsers (Safari, Chrome, Opera);
- ::-moz-placeholder - for Firefox browsers above version 19;
- :-moz-placeholder - for old Firefox;
- :-ms-input-placeholder - for Internet Explorer above version 10.
As you can see, old Mozilla browsers, as well as IE, consider placeholder a CSS pseudo-class, not a pseudo-element. We will not argue with them, we will just take this aspect into account when styling the input field.
Styling options
You can set the following options for the placeholder pseudo-element in CSS:
- background - a group of background-properties. The background of the hint block extends to the entire input field. You can set not only the color (background-color), but also the image (background-image).
- text color - color;
- transparency - opacity;
- underline, overline or strikethrough - text-decoration;
- register - text-transform;
- padding - padding. Not supported by all browsers. As with inline elements, top and bottom padding is ignored.
- font display - properties of the font group, line-height and various indents (text-indent, letter-spacing, word-spacing);
- vertical alignment in line - vertical-align;
- trim text when container overflows - text-overflow.
.input1::placeholder { background-image: linear-gradient(lime, blue); color:white; }.input2::placeholder { text-decoration: line-through; color:purple; font-weight: bold; }.input3::placeholder { font-size: 16px; letter-spacing: 10px }.input4::placeholder { background: brown; color:white; text-overflow: ellipsis; }
In focus
By default, the hint disappears from the input field only if at least one character is entered into it. But the CSS placeholder pseudo-element allows you to implement the disappearance immediately when the field is focused. To do this, you need to combine it with the pseudo-class:focus.
input:focus::placeholder { color: transparent; }
In some browsers, it is possible to animate a change in a number of placeholder properties using the transition statement.
input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }
In the Google Chrome browser, the tooltip color when focusing on such a field will smoothly change for one second.
