Задать цвет плейсхолдеру (placeholder)
Для различных вариантов дизайна страниц нужно указывать разный цвет для плейсхолдеров в формах.
Рассмотрим такой вариант input’а:
Для изменения цвета placeholder пропишем такие правила в наш CSS:
/* Chrome, Firefox, Opera, Safari 10.1+ */ ::placeholder < color: red; opacity: 1; >/* Internet Explorer 10-11 */ :-ms-input-placeholder < color: red; >/* Microsoft Edge */ ::-ms-input-placeholder
Рабочий пример кода с изменением цвета для placeholder в input:
В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке,…
Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код…
Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока…
Рассмотрим 2 наиболее часто применяющихся примера. Для обоих примеров будет общий HTML: И общие правила…
Как изменить цвет placeholder.
Как известно, буквально несколько лет назад в браузерах появилась интересная возможность устанавливать для текстовых полей input на веб-страницах какие-то текстовые значение по умолчанию.
Причем, эти текстовые значения автоматически исчезают, когда пользователь начинает вводить в текстовое поле какую-либо информацию.
Такой эффект достигается за счет использования атрибута placeholder. Почитать подробнее об этом атрибуте можно здесь.
Сегодня хочу поделиться техникой, как вы можете менять цвет текста, который создается с помощью этого атрибута.
Чтобы понять, как это делается, посмотрите на следующий пример:
::-webkit-input-placeholder < /* WebKit browsers */ color: red; >:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: red; >::-moz-placeholder < /* Mozilla Firefox 19+ */ color: red; >:-ms-input-placeholder < /* Internet Explorer 10+ */ color: red; >
Довольно интересная техника, нашел ее на англоязычном форуме. Надеюсь, что для вас она также как и для меня окажется полезной.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Псевдоэлемент ::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
- :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-a через javascript?
Всем привет! У меня есть инпут, как я могу поменять цвет placeholder-a при на фокусе на input? Сделать примерно как при входе ВКонтакте. То есть, если есть наведение на инпут, placeholder становится более прозрачным, ну или цвет более можно сделать ярким.
Узнал что можно вот так прописать в стилях:
.login::placeholder
Но тут у меня проблемы: Я всегда решал задачки через classList.add, заранее прописывая класс со стилями в файле style.css, где хранились все мои стили. Добвавлялось все просто, типо add(‘active’) и т.д. Но сейчас возникла проблема, не знаю как работать в javascript-e c псевдо-классами. Есть ли какое-то решение? Кто сталкивался?