Placeholder default color css

: : placeholder

Псевдоэлемент : : placeholder используется для стилизации текста-подсказки (плейсхолдера) в полях ввода и .

Пример

Скопировать ссылку «Пример» Скопировано

  input class="form-input" type="email" placeholder="Например: mygre@ema.il">    Скопировать Скопировано Не удалось скопировать   

 .form-input::placeholder  color: gray;> .form-input::placeholder  color: gray; >    Скопировать Скопировано Не удалось скопировать   

 ::placeholder  color: gray;> ::placeholder  color: gray; >    Скопировать Скопировано Не удалось скопировать   

 .email-input::placeholder  color: darkblue;> .email-input::placeholder  color: darkblue; >    Скопировать Скопировано Не удалось скопировать   

label for="user-email">Your email addresslabel> span id="user-email-hint" class="input-hint">Example: jane@sample.comspan> input id="user-email" aria-describedby="user-email-hint" name="email" type="email" /> 

Windows High Contrast Mode

Placeholder text will appear with the same styling as user-entered text content when rendered in Windows High Contrast Mode). This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.

Labels

Placeholders are not a replacement for the element. Without a label that has been programmatically associated with an input using a combination of the for and id attributes, assistive technology such as screen readers cannot parse elements.

Examples

Change placeholder appearance

This example shows some of the adjustments that you can make to the styles of placeholder text.

HTML

input placeholder="Type here" /> 

CSS

input::placeholder  color: red; font-size: 1.2em; font-style: italic; > 

Result

Opaque text

Some browsers (such as Firefox) set the default opacity of placeholders to something less than 100%. If you want fully opaque placeholder text, set opacity to 1 .

HTML

input placeholder="Default opacity" /> input placeholder="Full opacity" class="force-opaque" /> 

CSS

::placeholder  color: green; > .force-opaque::placeholder  opacity: 1; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The :placeholder-shown pseudo-class styles an element that has an active placeholder.
• Related HTML elements: ,
• HTML forms

Found a content problem with this page?

This page was last modified on Apr 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

::placeholder

Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.

Note: In most browsers, the appearance of placeholder text is a translucent or light gray color by default.

Syntax

Accessibility concerns

Color contrast

Contrast Ratio

Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.

It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputted data.

Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Usability

Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.

An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the with its hint.

With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.

for="user-email">Your email address id="user-email-hint" >"input-hint">Example: [email protected] id="user-email" aria-describedby="user-email-hint" name="email" type="email">

Windows High Contrast Mode

Placeholder text will appear with the same styling as user-entered text content when rendered in Windows High Contrast Mode. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.

Labels

Placeholders are not a replacement for the element. Without a label that has been programmatically associated with an input using a combination of the for and id attributes, assistive technology such as screen readers cannot parse elements.

Examples

Change placeholder appearance

This example shows some of the adjustments that you can make to the styles of placeholder text.

HTML

input placeholder="Type here">

CSS

input::placeholder < color: red; font-size: 1.2em; font-style: italic; >

Result

Opaque text

Some browsers (such as Firefox) set the default opacity of placeholders to something less than 100%. If you want fully opaque placeholder text, set opacity to 1 .

HTML

input placeholder="Default opacity"> input placeholder="Full opacity" class="force-opaque">

CSS

::placeholder < color: green; > .force-opaque::placeholder < opacity: 1; >

Источник

How To Change the Color of an HTML5 Input Placeholder Using CSS

HTML5 has an attribute called placeholder . This attribute being used on the and elements provides a hint to the user of what can be entered in the field.

How to Set Color of the Placeholder Text

The default color of a placeholder text is light grey in most browsers. If you want to change it, you need to use the ::placeholder pseudo-element.

In the case you want to select the input itself when it's placeholder text is being shown, use the :placeholder-shown pseudo-class.

The code example will look like the following.

Example of changing the color of the placeholder text:

html> html> head> title>Title of the document title> style> input < width: 90%; padding: 10px; margin: 5px; outline: none; > input[type="submit"] < width: 150px; > input::placeholder < color: #1c87c9; opacity: 1; > input:placeholder-shown < border: 1px solid #095484; > style> head> body> form action="/form/submit" method="post"> First name: input type="text" name="firstname" placeholder="John"> br> br> Last name: input type="text" name="lastname" placeholder="Lennon"> br> br> Email address: input type="email" name="email" placeholder="[email protected]"> input type="submit" value="Submit" /> form> body> html>

Result

You can also change the text color, which will be filled in the place of placeholder. For that purpose, define a class for each element and give styling to it.

Example of setting different colors for the placeholder text:

html> html> head> title>Title of the document title> style> input < padding: 10px; margin: 5px; width: 90%; > input[type="submit"] < width: 100px; > .one < color: #8ebf42; > .two < color: #ff0066; > .three < color: #1c87c9; > .one::placeholder < color: #1c87c9; > .two::placeholder < color: #ff0000; > .three::placeholder < color: #8ebf42; > input:placeholder-shown < border: 1px solid #095484; > style> head> body> form action="/form/submit" method="post"> First name: input class="one" type="text" name="firstname" placeholder="John"> br> br> Last name: input class="two" type="text" name="lastname" placeholder="Lennon"> br> br> Email address: input class="three" type="email" name="email" placeholder="[email protected]"> input type="submit" value="Send" /> form> body> html>

It is important to remember that for each browser there is a different implementation way. For example,

1. ::-webkit-input-placeholder pseudo-element for Chrome/Safari/Opera,
2. ::-ms-input-placeholder pseudo-class for Edge (also supports webkit prefix).

The above pseudo-class and pseudo-element are necessary to handle the required result.

Example of changing the color of the placeholder text with some extensions used:

html> html> head> title>Title of the document title> style> input < padding: 5px 10px; > ::placeholder < color: #1c87c9; opacity: 1; /* Firefox */ > :-webkit-input-placeholder < /* Chrome, Safari, Opera */ color: #1c87c9; > ::-ms-input-placeholder < /* Microsoft Edge */ color: #1c87c9; > style> head> body> form action="/form/submit" method="post"> First name: input type="text" name="firstname" placeholder="John"> br> br> Last name: input type="text" name="lastname" placeholder="Lennon"> br> br> Email address: input type="email" name="email" placeholder="[email protected]"> br/> br/> input type="submit" value="Submit" /> form> body> html>

Источник