Css change placeholder color. Add CSS style for placeholder
A pseudo-element that sets the style of the tooltip text created by the placeholder attribute. You can use properties to change the appearance of the text, for example, set the font and color.
Syntax
Selector::placeholder ( ... )
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of the value. | <размер> |
| A && B | The values must be output in the order specified. | <размер> && <цвет> |
| A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
| A || B | Each value can be used independently or together with others in any order. | width || count |
| Groups values. | [ crop || cross ] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times separated by commas. | <время># |
Example
The result of the example is shown in Fig. 1.
Rice. 1. Using::placeholder
Note
Internet Explorer uses the pseudo-class :-ms-input-placeholder.
Microsoft Edge uses the ::-ms-input-placeholder pseudo-element.
Chrome before version 57, Opera before version 44, Safari before version 10.1 and Android use the ::-webkit-input-placeholder pseudo-element.
Firefox from version 4 to 19 uses the :-moz-placeholder pseudo-class.
Firefox before version 51 uses the ::-moz-placeholder pseudo-element.
Browsers
Browsers
The following notations are used in the browser table.
Hello, today you won’t surprise anyone using a placeholder for input. Placeholder is a temporary text with an example inside the input that disappears when you enter text. We will try to write the CSS style for the placeholder today.
Task: make your own CSS style for placeholder
Let's say we have a stylish website that uses a placeholder in the input. We need to make the gray, boring text style of the placeholder look consistent with the general style of the site. How can this be achieved? I’ll say right away that this does not work in all browsers yet. Specifically, it doesn’t work at all in IE versions 9 and below; in 10 and later it still works with great difficulty. Firefox and webkit browsers are another matter.
Solution: css style for placeholder
So, we have set the task, how are we going to solve it?
First, let's create a testing ground:
Done, now let's see what we can do with the style: webkit and mozilla have their own modifiers that allow you to assign a special style to the placeholder: ::-webkit-input-placeholder and:-moz-placeholder. Let's see how to use them:
Let's describe the style of the input itself and the text in it (blue color for contrast in the example):
Input( width: 250px; color: blue; font-weight: normal; font-style: normal; )
Now let’s write a special style for the placeholder text in this input for Webkit browsers (Chrome, Safari, Opera):
Input::-webkit-input-placeholder( color: red; font-style: italic; font-weight: bold; )
Let's make the placeholder text red bold italic. Note that unlike other CSS pseudo-classes, which are separated by a single colon, the style for placeholder in webkit is separated by a double colon.
Now let's write exactly the same style for Mozilla Firefox browsers:
Input:-moz-placeholder( color: red; font-style: italic; font-weight: bold; )
Ready. CSS style for placeholder, of course you can write any one that is more suitable for your design. A working demo can be viewed at
Placeholder is an element of an input field in which a tooltip can be placed. When the user begins to enter data, the supporting text disappears so as not to interfere. Each browser has its own opinion on how this element should be displayed, and sometimes default styles break the entire design. To manage them, you need to use a special rule CSS placeholder.
Where is the placeholder?
The problem is that the input field's tooltip is firmly hidden in the shadow DOM and is not that easy to get to. To do this, a special non-standard CSS::placeholder pseudo-element is used. With its help you can manage the properties of the tooltip.
You will be interested:
Styling a 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, and to support older browsers you can use the following prefixes:
- ::-webkit-input-placeholder - for webkit browsers (Safari, Chrome, Opera);
- ::-moz-placeholder - for Firefox browsers above version 19;
- :-moz-placeholder - for older Firefox;
- :-ms-input-placeholder - for Internet Explorer above version 10.
As you can see, old Mozilla browsers, as well as IE, consider placeholder to be a CSS pseudo-class, not a pseudo-element. Let's not argue with them, we'll 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 - group of background properties. The hint block background applies 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;
- underlining, overlining or striking out - text-decoration;
- case - text-transform;
- internal indents - 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 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 tooltip 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 fading immediately when focusing on the field. 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 changes in a number of placeholder properties using the transition statement.
input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )
In the browser Google Chrome When focusing on such a field, the color of the hint will smoothly change within one second.
Placeholder is an element of an input field in which a tooltip can be placed. When the user begins to enter data, the supporting text disappears so as not to interfere. Each browser has its own opinion on how this element should be displayed, and sometimes default styles break the entire design. To control them, you need to use a special CSS rule placeholder
Where is the placeholder?
The problem is that the input field's tooltip is firmly hidden in the shadow DOM and is not that easy to get to. For this, a special non-standard ::placeholder is used. With its help you can manage the properties of the tooltip.
Styling a 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, and to support older browsers you can use the following prefixes:
- ::-webkit-input-placeholder - for webkit browsers (Safari, Chrome, Opera);
- ::-moz-placeholder - for Firefox browsers above version 19;
- :-moz-placeholder - for older Firefox;
- :-ms-input-placeholder - for Internet Explorer above version 10.
As you can see, older Mozilla browsers, as well as IE, consider placeholder to be a CSS pseudo-class and not a pseudo-element. Let's not argue with them, we'll 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 - the tooltip block group applies 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;
- underlining, overlining or striking out - text-decoration;
- case - text-transform;
- internal indents - 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 a line - vertical-align;
- trimming text when the container overflows - text-overflow.
In focus
By default, the tooltip disappears from the input field only if at least one character is entered into it. But placeholder allows you to implement the disappearance immediately when focusing on the field. 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 changes in a number of placeholder properties using the transition statement.
Input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )
IN Google browser Chrome tooltip color when focusing on such a field will smoothly change within one second.
The placeholder attribute is used for calls to action inside empty input and textarea elements. In this article we will look at the possibilities of styling placeholder text, as well as some tricks that will make it more convenient and functional.
So, let's start with an example for those who don't know what a placeholder is.
html
The style of placeholder can be changed using the following set of css rules:
css
::-webkit-input-placeholder (color:#c0392b;) ::-moz-placeholder (color:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (color:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (color:#c0392b;)It looks scary, doesn't it? The fact is that this is still not in the standards. Each browser implements support for placeholder styling in its own way.
In IE and old firefox(before the 18th) placeholder is considered a pseudo-class, and in new firefox, webkit and blink - a pseudo-element.
Let's see what happened:
It must be said that not all possible options are supported. css properties. Most modern browsers allow you to change:
- font (and related properties)
- background (and related properties)
- color
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- text-indent
- text-overflow
- opacity
What if the placeholder doesn’t fit?
Sometimes text input fields are reduced in width due to layout features, in particular on mobile devices. In this case long text placeholder will be cut off unsightly. To prevent this you can use text-overflow: ellipsis. This syntax will work in all new browsers.
css
input (text-overflow:ellipsis;) input::-moz-placeholder (text-overflow:ellipsis;) input:-moz-placeholder (text-overflow:ellipsis;) input:-ms-input-placeholder (text-overflow :ellipsis;)How to hide placeholder on focus?
Hiding a placeholder occurs in different ways.
- in some browsers when receiving focus by input
- in other browsers if there is at least one character entered
I like the first option better. In order to set this behavior in all browsers that support placeholder, we will define the following CSS rules:
css
:focus::-webkit-input-placeholder (color: transparent) :focus::-moz-placeholder (color: transparent) :focus:-moz-placeholder (color: transparent) :focus:-ms-input-placeholder ( color: transparent)Hiding the placeholder beautifully
You can also add a transition to show and hide the placeholder:
css
/* smooth change of placeholder transparency when focused */ .input1::-webkit-input-placeholder (opacity: 1; transition: opacity 0.3s ease;) .input1::-moz-placeholder (opacity: 1; transition: opacity 0.3s ease;).input1:-moz-placeholder (opacity: 1; transition: opacity 0.3s ease;).input1:-ms-input-placeholder (opacity: 1; transition: opacity 0.3s ease;).input1 :focus::-webkit-input-placeholder (opacity: 0; transition: opacity 0.3s ease;).input1:focus::-moz-placeholder (opacity: 0; transition: opacity 0.3s ease;).input1:focus :-moz-placeholder (opacity: 0; transition: opacity 0.3s ease;) .input1:focus:-ms-input-placeholder (opacity: 0; transition: opacity 0.3s ease;) /* shift the placeholder to the right when focus*/ .input2::-webkit-input-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;) .input2::-moz-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;) .input2:-moz-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;).input2:-ms-input-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;).input2:focus::-webkit-input-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;).input2:focus::-moz-placeholder ( text-indent: 500px; transition: text-indent 0.3s ease;).input2:focus:-moz-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;).input2:focus:-ms- input-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;) /* shift the placeholder down when focused */ .input3::-webkit-input-placeholder (line-height: 20px; transition: line-height 0.5s ease;).input3::-moz-placeholder (line-height: 20px; transition: line-height 0.5s ease;).input3:-moz-placeholder (line-height: 20px; transition: line -height 0.5s ease;).input3:-ms-input-placeholder (line-height: 20px; transition: line-height 0.5s ease;).input3:focus::-webkit-input-placeholder (line-height: 100px; transition: line-height 0.5s ease;).input3:focus::-moz-placeholder (line-height: 100px; transition: line-height 0.5s ease;).input3:focus:-moz-placeholder (line -height: 100px; transition: line-height 0.5s ease;) .input3:focus:-ms-input-placeholder (line-height: 100px; transition: line-height 0.5s ease;)I hope you find this useful. Write comments and suggestions in the comments.
