Как поменять font в placeholder?
Здравствуйте ребята, и вот вопрос. В хтмл есть тег input type=»text», он выводит текстовую форму, и есть textarea, как поменять шрифт именно текст подсказки(placeholder)?
- Вопрос задан более трёх лет назад
- 6269 просмотров
Комментировать
Решения вопроса 1
Shit happens
::-webkit-input-placeholder < color:#f00; font-family: Georgia;>::-moz-placeholder < color:#f00; font-family: Georgia;>:-ms-input-placeholder < color:#f00; font-family: Georgia;>:-moz-placeholder
Ответ написан более трёх лет назад
Псевдоэлемент ::placeholder
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
Синтаксис
Селектор::placeholder
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Пример
Результат примера показан на рис. 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 .
Браузеры
| 10 | 12 | 4 | 57 | 15 | 44 | 5 | 10.1 | 4 | 19 | 51 |
| 2.1 | 19 | 30 | 4.3 | 10.3 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- Атрибут placeholder
- Подсказка в поле формы
- Подсказывающий текст
- Псевдокласс :placeholder-shown
Практика
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :buffering
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :paused
- :placeholder-shown
- :playing
- :read-only
- :read-write
- :required
- :root
- :seeking
- :stalled
- :target
- :valid
- :visited
- :volume-locked
- @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
- gap
- 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
- row-gap
- 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 используется для стилизации текста-подсказки (плейсхолдера) в полях ввода и .
Пример
Скопировать ссылку «Пример» Скопировано
input class="form-input" type="email" placeholder="Например: mygre@ema.il">
.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, но в случаях когда нужны разные стили в одной подсказке он не поможет. Возможны альтернативы:
Атрибут required и псевдокласс invalid
При добавлении атрибута required к полю формы , начинает работать псевдокласс :invalid , который действует если поле не заполнено. Так работает первый вариант:
CSS:
.placeholder-box < display: block; position: relative; margin: 20px 0; >.placeholder-box input < display: block; box-sizing: border-box; width: 100%; height: 35px; line-height: 35px; padding: 0 10px; font-size: 14px; font-weight: 400; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: 5px; >.placeholder-text < display: none; width: 100%; line-height: 37px; position: absolute; left: 10px; top: 0; bottom: 0; color: #888; cursor: text; user-select: none; >.placeholder-box input:invalid + .placeholder-text