Как добавить placeholder через css

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

Как понять

Скопировать ссылку "Как понять" Скопировано

Как пишется

Скопировать ссылку "Как пишется" Скопировано

Два двоеточия и ключевое слово placeholder .

Стиль применится ко всем подсказкам на странице:

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

Стиль применится только к подсказкам у полей ввода с классом email - input :

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

Подсказки

Скопировать ссылку "Подсказки" Скопировано

�� Для стилизации подсказки можно использовать только следующие свойства:

• все шрифтовые свойства, начинающиеся с font (например, font - size или font - style );
• все свойства для работы с фоном, начинающиеся с background - (например, background - color или background - size );
• свойство color ;
• свойства word - spacing , letter - spacing , text - decoration , text - transform и line - height ;
• свойства text - shadow , группу свойств text - decoration и vertical - align .

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

�� Желательно стилизовать подсказку таким образом, чтобы визуально она отличалась от введённого текста. Как правило, её делают полупрозрачной, либо просто светлее вводимого текста.

Псевдоэлемент ::placeholder

Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Синтаксис

Селектор::placeholder

Синтаксис

Пример

Результат примера показан на рис. 1.

Рис. 1. Использование ::placeholder

Примечание

Internet Explorer использует псевдокласс :-ms-input-placeholder .

Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .

Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .

Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .

Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .

Браузеры

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

• Атрибут placeholder
• Подсказка в поле формы
• Подсказывающий текст
• Псевдокласс :placeholder-shown

Практика

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

::placeholder¶

С помощью псевдоэлемента ::placeholder задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder .

Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

• ::after
• ::backdrop
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::grammar-error
• ::marker
• ::part()
• ::placeholder
• ::selection
• ::slotted()
• ::spelling-error

Синтаксис¶

1 2 3 4

::placeholder  color: blue; font-size: 1.5em; > 

Спецификация¶

Примечания¶

• Internet Explorer использует псевдокласс :-ms-input-placeholder .
• Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .
• Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .
• Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .
• Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .

Пример 1¶

input placeholder="Type something here!" /> 

1 2 3 4 5

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

Пример 2¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

 html> head> meta charset="utf-8" /> title>placeholdertitle> style> body  background: #053f38; > input[type='search']  border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ > input[type='search']::-moz-placeholder  color: #ffd595; /* Цвет подсказывающего текста */ > input[type='search']::-webkit-input-placeholder  color: #ffd595; > input[type='search']:-ms-input-placeholder  color: #ffd595; > input[type='search']::-ms-input-placeholder  color: #ffd595; > input[type='search']::placeholder  color: #ffd595; > style> head> body> form action="handler.php"> p> input type="search" placeholder="Поиск по сайту" name="q" /> input type="submit" value="Найти" /> p> form> body> html> 

См. также¶

• :placeholder-shown

Ссылки¶

• Псевдо-элемент ::placeholderMDN (рус.)

CSS ::placeholder Selector

Change the color of the placeholder text of an input field:

Definition and Usage

The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text.

The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.

Tip: The default color of the placeholder text is light grey in most browsers.

Browser Support

The numbers in the table specify the first browser version that fully supports the selector.

Numbers followed by -webkit-, -moz- or -ms- specify the first version that worked with a prefix.