Оформление плейсхолдера с помощью CSS стилей

Категория: Сайтострой
- изменение стиля плейсхолдера;
- скрытие сразу при нажатии на поле;
- отображение в браузерах, которые не поддерживают атрибут.
Изменение цвета placeholder
Браузеры на разных движках по разному отображают плейсхолдер. Чаще всего это чёрный текст с прозрачностью, что в итоге смотрится как серый. Чтобы изменить цвет и прозрачность необходимо в CSS стилях к элементам ввода указывать дополнительные директивы для движков браузеров. Изменим цвет на красный без прозрачности.<style> ::-webkit-input-placeholder {color:#f00; opacity:1;}/* webkit */ ::-moz-placeholder {color:#f00; opacity:1;}/* Firefox 19+ */ :-moz-placeholder {color:#f00; opacity:1;}/* Firefox 18- */ :-ms-input-placeholder {color:#f00; opacity:1;}/* IE */ </style> <input type="text" placeholder="Начните вводить текст" value="" />Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.
.input-1::-webkit-input-placeholder { color:red; } .input-2::-webkit-input-placeholder { color:green; } ... и.т.д.
Убираем placeholder при нажатии на поле
:focus::-webkit-input-placeholder {opacity:0;}/* webkit */ :focus::-moz-placeholder {opacity:0;}/* Firefox 19+ */ :focus:-moz-placeholder {opacity:0;}/* Firefox 18- */ :focus:-ms-input-placeholder {opacity:0;}/* IE */Скрывать плейсхолдер при форкусе можно по разному, например, плавно изменяя прозрачность или цвет. А можно настроить и css анимацию, когда подсказка будет плавно уезжать за пределы поля. Всё это возможно благодаря CSS, но большого смысла я в этом не вижу, так как кроссбраузерность таких прелестей будет страдать, а пользы от этих эффектов практически никакой.
Кроссбраузерность placeholder
Устаревшие браузеры не поддерживают атрибут «placeholder» — он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть "люди" которые им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то разработчик обязан позаботиться о полной кроссбраузерности. Для отображени подсказки в браузерах, которые не поддерживают атрибут, будем использовать jquery плагин.<script src="/jquery.placeholder.min.js"></script> <script> $(function(){ $('input[placeholder], textarea[placeholder]').placeholder(); }); </script> <style> input.placeholder, textarea.placeholder. { color: green; } </style>Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.
2
6295
Посмотрите похожее — 6
Комментарии —
-
Михаэль Вейк 28 января 2019, 09:43 # ↓
ребят подскажите, а можно ли без двоеточия запихнуть в CSS таблицу самый первый код настроек для этой штучки?.. страшно что-то…ответить-
Simkin Andrew 28 января 2019, 11:50 # ↑ ↓
Можно, только работать не будет. Это псевдоклассы, поэтому двоеточия обязательны.ответить
-