Как изменить шрифт placeholder css
Перейти к содержимому

Как изменить шрифт placeholder css

  • автор:

Оформление 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

Стили для placeholder

Можно менять почти любые свойства CSS, которые относятся к тексту — размер шрифта, начертание(жирный, наклонный), цвет и так далее. Эти стили повлияют только на placeholder, стили текста в input и textarea не будут затронуты.

CSS для input
input::-webkit-input-placeholder < /* Chrome/Opera/Safari */ color: #000; opacity: 1; >input::-moz-placeholder < /* Firefox 19+ */ color: #000; opacity: 1; >input:-ms-input-placeholder < /* IE 10+ */ color: #000; opacity: 1; >
CSS для textarea
textarea::-webkit-input-placeholder < /* Chrome/Opera/Safari */ color: #000; opacity: 1; >textarea::-moz-placeholder < /* Firefox 19+ */ color: #000; opacity: 1; >textarea:-ms-input-placeholder < /* IE 10+ */ color: #000; opacity: 1; >

Данные стили использую в каждом проекте для одинакового отображения placeholder в разных браузерах.

Также можно прописать стили placeholder при фокусе input или textarea, чтобы получить, например, такой эффект:

Посмотреть этот пример можно на codepen

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

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

Синтаксис

Селектор::placeholder

Синтаксис

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Пример

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

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

Рис. 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
  • :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

Стилизация текста-заполнителя с помощью CSS

Как вы знаете, чаще всего текст-заполнитель автоматически наследует семейство и размер шрифта обычного вводимого текста. Однако в некоторых ситуациях возникает необходимость изменить цвет текста-заполнителя. В CSS это можно сделать с помощью псевдоэлемента ::placeholder .

В целом CSS-псевдоэлемент ::placeholder представляет текст-заполнитель в элементе или . Селектор placeholder поддерживает только подмножество свойств CSS, которые применяются к псевдоэлементу ::first-line.

Давайте рассмотрим следующий пример. В приведенном ниже коде мы определим для текста-заполнителя собственный цвет, а также переопределим унаследованный размер шрифта, сделав его меньше. Вот наш базовый стиль ввода:

input[type="text"]  font-family: monospace; font-size: 20px; color: peru; >

А вот стилизация текста-заполнителя:

::-webkit-input-placeholder  color: peachpuff; font-size: 13px; > ::-moz-placeholder  color: peachpuff; font-size: 13px; > :-ms-input-placeholder  color: peachpuff; font-size: 13px; > ::placeholder  color: peachpuff; font-size: 13px; >

К сожалению, как вы можете видеть, псевдлоэлемент ::placeholder на данный момент требует множества вендорных префиксов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *