Set the placeholder color. How to change placeholder color using css

Input elements have a "placeholder" attribute. With its help, you can display text in an input field that disappears when you start filling it. Browsers display the placeholder differently, and outdated ones do not support it at all. However, there are ways to circumvent all the disadvantages of this useful attribute. Consider the following points:

changing the placeholder style;
hide immediately when you click on a field;
display in browsers that do not support the attribute.

For example, let's take the input text field and apply styles to it.

Change placeholder color

Browsers on different engines display the placeholder differently. Most often this is black text with transparency, which ultimately looks like gray. To change color and transparency, you need to specify additional directives for browser engines in CSS styles for input elements. Let's change the color to red without transparency.

::-webkit-input-placeholder (color:#f00; opacity:1;)/* webkit */ ::-moz-placeholder (color:#f00; opacity:1;)/* Firefox 19+ */ :- moz-placeholder (color:#f00; opacity:1;)/* Firefox 18- */ :-ms-input-placeholder (color:#f00; opacity:1;)/* IE */

If you do not specify "opacity", the color will be pink in browsers that support transparency. You can also specify different colors for different fields. To do this, use classes.

Input-1::-webkit-input-placeholder ( color:red; ) .input-2::-webkit-input-placeholder ( color:green; ) ... etc.

Removing placeholder when clicking on a field

By default, browsers hide the placeholder only after you start typing. But it’s not difficult to make it disappear immediately after placing the cursor in the input field. To do this, we will write a style for fields with focus in which we will make the tooltip completely transparent.

:focus::-webkit-input-placeholder (opacity:0;)/* webkit */ :focus::-moz-placeholder (opacity:0;)/* Firefox 19+ */ :focus:-moz-placeholder ( opacity:0;)/* Firefox 18- */ :focus:-ms-input-placeholder (opacity:0;)/* IE */

You can hide a placeholder during forcus in different ways, for example, by smoothly changing the transparency or color. And you can configure css animation, when the hint moves smoothly out of the field. All this is possible thanks to CSS, but I don’t see much point in it, since the cross-browser compatibility of such delights will suffer, and there is practically no benefit from these effects.

Cross-browser compatibility placeholder

Legacy browsers do not support the "placeholder" attribute - it simply won't be displayed. Such browsers include IE8. Despite the end of support Internet Explorer, there are “people” who use it. If the placeholder does not carry important information, then you can forget about its display, but if everyone should see the contents of the tooltip, then the developer is obliged to take care of full cross-browser compatibility.

To display a tooltip in browsers that do not support the attribute, we will use jquery plugin.

Download it and connect. Do not forget that it must be connected in the same way jquery library. Apply the plugin to input elements with the “placeholder” attribute:

$(function())( $("input, textarea").placeholder(); )); input.placeholder, textarea.placeholder. ( color: green; )

The plugin only works if the browser does not support placeholders. In this case, the elements to which it is applied are assigned the “placeholder” class, and the text from the “placeholder” attribute is written to “value”. On focus, "value" is cleared. To prevent the text from the attribute from looking exactly the same as the input text, we style it using styles, based on the installed class. In the example, the text color of the inactive field will be green. But you can only see this in IE8 or other legacy browsers.

This tutorial will show you how to change the placeholder text color of a form field.

The form field's placeholder text contains a tooltip that indicates the expected data in the field. This could be an example or short description expected information. A short hint is displayed in the field before the user begins entering data.

By default, alt text is light gray (which is how browsers display it). To add to this text custom styles You will need to use browser prefixes for CSS properties.

To change the color of the alt text, follow these instructions:

Code according to the following information(note that you need to add the same code 4 times for each browser prefix):

Select the file to which you will add the code. You can add it to any CSS file on your site, but we have prepared for you a list of files in which it is recommended to add CSS rules For different types website engines:

CMS Templates:

WordPress Themes (WooCommerce/Jigoshop Themes) /wp-content/themes/themeXXXXX/style.css
Joomla Templates (VirtueMart Templates) /templates/themeXXXX/css/template.css
Drupal themes /sites/all/themes/themeXXX/css/style.css
Web Templates (HTML5) /css/style.css

E-commerce templates:

Magento Themes /skin/frontend /default/themeXXX/css/styles.css
PrestaShop Themes /themes/themeXXXX/css/global.css
OpenCart Themes /catalog/view/theme/themeXXX/stylesheet /stylesheet .css
ZenCart Themes /includes/templates/themeXXX/css/stylesheet .css
osCommerce Templates /css/stylesheet.css
Shopify Templates style.css.liquid

Save changes and upload CSS files to your server.

Many of you have often come across forms that have signatures as hints. They disappear when typing. So, this is the placeholder attribute, which is present on elements that are created for text input (input). Using it, you can set the text that will be displayed as a hint before you start typing in this field. Unfortunately, not all browsers work equally correctly with this attribute. Outdated versions and this text is not displayed at all.

Now let's look at how to solve the problems described below:

1. How to change placeholder styles;
2. How to hide the placeholder text not when you type, but when you click on the field;
3. What to do with browsers where the placeholder is not displayed in principle.

In all examples we will work with the input field.

How to change the color of the tooltip text in placeholder in input? It is no longer news that each browser not only displays placeholders differently, but also requires special properties for changing styles. And I’m not even talking about the corresponding prefixes in the spelling. Let's look at them.

The default tooltip color in many browsers is gray. IN in this example Let's make it black.

::-webkit-input-placeholder (color:#000000; opacity:1;)/* webkit */
::-moz-placeholder (color:#000000; opacity:1;)/* Firefox 19+ */
:-moz-placeholder (color:#000000; opacity:1;)/* Firefox 18- */
:-ms-input-placeholder (color:#000000; opacity:1;)/* IE */

Opacity property, responsible for transparency, must be entered for those browsers that support transparency for of this element. Otherwise the color will be gray as the default.

And yes, you can use classes to specify these properties. Look below:

Input-phone::-webkit-input-placeholder ( color:red; )
.input-text::-webkit-input-placeholder ( color:green; )
/* and so on... */

Removing placeholder when clicking on a field By default, in browsers, the text from the placeholder attribute disappears only after the start of input, but there are those who want this text not to distract already at the stage of clicking on the input field. Most often they do just that. To do this, you need to write styles for focus, where the color of the tooltip text will become completely transparent, that is, it will no longer be visible.

:focus::-webkit-input-placeholder (opacity:0;)/* webkit */
:focus::-moz-placeholder (opacity:0;)/* Firefox 19+ */
:focus:-moz-placeholder (opacity:0;)/* Firefox 18- */
:focus:-ms-input-placeholder (opacity:0;)/* IE */

You can even set up a smooth change in transparency or color change with CSS animation. But there may be problems with cross-browser compatibility of such solutions.

What about browsers that don't support the placeholder attribute in input? Well, definitely don’t get lost) Yes, indeed, there are such browsers. For example, IE8. And yes, there are adept people who will always use it. If you need to make a solution for all visitors, then have a little more patience.

To solve this problem, download the popular jquery plugin for this - jquery.placeholder. I won’t give links, as they will change today or tomorrow. But, if anything, you can download a working example with the plugin - download the sources.

Let's connect it. Don't forget that you also need to connect jquery.

$(function())(
$("input, textarea").placeholder();
});

input.placeholder, textarea.placeholder. ( color: green; )

If you are not familiar with the placeholder attribute, then let's explain a little what it is and where it is used. It is used in form input fields. The attribute displays a text in the input field, representing the role of a certain hint. Earlier on our website there was an example, with using javascript, positive side this method It's cross-browser compatible. Now let's talk about styling the placeholder attribute, which is used on input and textarea elements.
The input field code in our example will look something like this:

At the output we get the following field:

Now let's imagine that we need to style the placeholder, for this we need to write a set of rules in CSS:

::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( color: #c1c1c1; )

We get:

We cannot change all properties, but a list of most of them supported by modern browsers is given below:
font (also related properties)
background (also related properties)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

IN different browsers the rule is written differently, because Not yet uniform standard, this set of records continues to be current. In the IE browser, as well as firefox below version 18, placeholder is perceived as a pseudo-class, and in new browsers firefox, webkit and blink it is perceived as a pseudo-element.

Shortening text in placeholder
Sometimes tooltips can be so long that they cannot completely fit into the input field. For these purposes you can also use additional properties which will reduce placeholder text in the input field.

Input ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :ellipsis;

As a result, we get an input field with a placeholder like this:

Hide text when clicking on a field
By default, each browser interprets placeholder's response differently. In some browsers it is hidden immediately when you click on the field, in others it is hidden when there is at least one character in the input field. Let's make the text disappear when you click on the field, the same in all browsers.

:focus::-webkit-input-placeholder ( color: transparent; ) :focus::-moz-placeholder ( color: transparent; ) :focus:-moz-placeholder ( color: transparent; ) :focus:-ms-input -placeholder ( color: transparent; )

We get this action:

The pseudo-element::placeholder color (in some cases the pseudo-class) allows you to set the text content of a form element. It is set using the placeholder: attribute.

This text can be styled for most modern browsers using special prefixes:

::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )

Warning: This is non-standard syntax and has strange names associated with it. :placeholder-shown is a standard, and even the authors of the spec probably think that ::placeholder is standardized.

As with any pseudo-element, you can apply it to certain elements in the following way:

input.big-dog::-webkit-input-placeholder ( color: orange; )

View example

Difference between:placeholder-shown and::placeholder

:placeholder-shown is for highlighting the input form, and CSS placeholder color is responsible for styling the text.

Take a look at the diagram:

This turns out to be confusing for a lot of people, and I often see specs where there is :placeholder-shown but not ::placeholder .

It should be noted that :placeholder-shown can affect the styling of the text, since it is for it parent element(for example, you can change font-size ).

Note that :placeholder-shown is a pseudo-class (an element in a concrete state) and ::placeholder is a pseudo-element (the visible part that is not in the DOM). They differ in single and double quotation marks.

Since :placeholder-shown is a pseudo-class, it must highlight an existing element. And therefore highlights the input form when the text in the form element is displayed. The ::placeholder pseudo-element wraps the placeholder text itself.

Element or class?

In this plan input placeholder color is not standardized. This means that each browser has its own understanding of how it should work.

This pseudo-class was originally implemented in Firefox browser. This pseudo-class doesn't give much wiggle room. For example, if you want to change the color of the text when highlighting an input form, you will need to use a selector like input:focus::placeholder . But the pseudo-class does not allow this.

IE10 supports this functionality as a pseudo-class rather than an element. In all other browsers it is treated as a pseudo-element.

Placeholder color in Firefox

You'll notice that the color of the placeholders looks dull compared to other browsers. The picture below shows Firefox 43 on the left and Chrome 47 on the right: