Изменение цвета заполнителя ввода с помощью CSS

Большинство современных браузеров поддерживают простой псевдоэлемент:

::placeholder {
  color: #9400d3;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Но что если вам нужно применить цвет к заполнителю в более старых браузерах?

WebKit, Blink (Safari, Google Chrome, Opera 15+) и Microsoft Edge используют псевдоэлемент ::-webkit-input-placeholder.

::-webkit-input-placeholder {
  color: #9400d3;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Mozilla Firefox 4 — 18

Использование псевдокласса: :-moz-placeholder

:-moz-placeholder {
  color: #9400d3;
  opacity: 1;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Похоже, что по умолчанию в Firefox используется уменьшенная непрозрачность, поэтому здесь нужно использовать opacity: 1.

Mozilla Firefox 19+

Использование псевдоэлемента: ::-moz-placeholder, но старый селектор все еще будет работать некоторое время.

::-moz-placeholder {
  color: #9400d3;
  opacity: 1;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Internet Explorer 10-11

Использование псевдокласса: :-ms-input-placeholder.

:-ms-input-placeholder {
  color: #9400d3;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
Procodings.ru
Добавить комментарий