Placeholder - an element of the input field where you can place a hint. When the user begins to enter data, the auxiliary text disappears so as not to interfere. Each browser has its own opinion on how this element should be displayed, and sometimes the default styles break the whole design. To manage them, you need to use the special CSS placeholder rule.
Where is the placeholder located?
The problem is that the input field hint is securely hidden in the shadow DOM, and getting to it is not so easy. For this, a special non-standard CSS :: placeholder pseudo - element is used. Use it to control tooltip properties.
CSS placeholder styling 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, and you can use prefixes to support older browsers:
- :: - 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, older Mozilla browsers, as well as IE, consider placeholder a CSS pseudo-class, not a pseudo-element. We will not argue with them, just take this aspect into account when styling the input field.
Styling options
For a placeholder pseudo-element in CSS, you can set the following parameters:
- background - a group of background properties. The background of the prompt box extends to the entire input field. You can specify not only the color (background-color), but also the image (background-image).
- text color - color;
- transparency - opacity;
- underline, underline or strikethrough - text-decoration;
- register - text-transform;
- padding is padding. Not supported by all browsers. As for line elements, the top and bottom margins are ignored.
- font display - font, line-height group properties and various indents (text-indent, letter-spacing, word-spacing);
- vertical alignment in a line - vertical-align;
- trimming text when the 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 prompt disappears from the input field only if at least one character is entered in it. But the CSS placeholder pseudo-element allows you to realize the disappearance immediately when focusing on the field. To do this, combine it with the: focus pseudo-class.
input:focus::placeholder { color: transparent; }
In some browsers, it is permissible 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 Google Chrome, the color of the tooltip when you focus on such a field will smoothly change within one second.