::placeholder

    0
    421

    ::placeholder это CSS псевдоэлемент с его помощью можно оформить текст, заданный HTML атрибутом placeholder.

    Атрибут placeholder предназначен для создания подсказки пользователю о том, как заполнить форму.

    К примеру, поле для email адреса, может содержать placeholder email@example.com, а поле для даты “YYYY/MM/DD” для обозначения формата вводимых данных, т.е. год/месяц/день.

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

    Тонкости & Особенности

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

    Некоторые браузеры, имеют свои собственные, нестандартные реализации ::placeholder. Данные реализации требуют использовать специальные префиксы. К примеру — ::-webkit-input-placeholder, :-ms-input-placeholder и :-moz-placeholder, который с версии Firefox 19 был заменен на новый вариант ::-moz-placeholder.

    В зависимости от браузера, placeholder поля может остаться пустым при фокусе на это поле, даже если оно не было заполнено, например, в IE10+.

    Пример

    Данный ниже CSS код изменит цвет текста и шрифт подсказки(placeholder):

    Еще один пример

    Поддерживаемые браузеры

    ПОДЕЛИТЬСЯ
    Предыдущая статья::after
    Следующая статья::before
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя