Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS? Добавляем CSS стиль для placeholder А что делать с бразуерами, которые не поддерживают атрибут placeholder в input.



Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот - это атрибут placeholder, который есть у элементов, которые созданы для ввода текста (input). С помощью него можно задать текст, который будет отображаться как подсказка до начала ввода в данное поле. К сожалению, не все браузеры одинаково корректно работают с данным атрибутом. Устаревшие версии и вовсе данный текст не отображают.

Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:

1. Как изменить стили для плейсхолдера;
2. Как скрыть текст плейсхолдера не при вводе, а уже при нажатии на поле;
3. Что делать с браузерами, где в принципе не отображается placeholder.

Во всех примерах будем работать с полем input.

Как изменить цвет текста-подсказки в placeholder в input? Давно уже не новость, что каждый браузер не только по-разному отображает placeholder, но и требует особых свойств для изменения стилей. И это я уже не говорю о соответствующих префиксах в написании. Давайте рассмотрим их.

По умолчанию во многих браузерах цвет подсказки - серый. В данном примере сделаем его чёрным.


::-webkit-input-placeholder {color:#000000; opacity:1;}/* webkit */
::-moz-placeholder {color:#000000; opacity:1;}/* Firefox 19+ */
:-moz-placeholder {color:#000000; opacity:1;}/* Firefox 18- */
:-ms-input-placeholder {color:#000000; opacity:1;}/* IE */

Свойство opacity, отвечающее за прозрачность, необходимо вводить для тех браузеров, где поддерживается прозрачность для данного элемента. В противном случае цвет будет серым, как и по умолчанию.

И да, можно использовать для указания этих свойств классы. Смотрим ниже:

Input-phone::-webkit-input-placeholder { color:red; }
.input-text::-webkit-input-placeholder { color:green; }
/* и так далее... */

Убираем placeholder при нажатии на поле По умолчанию в браузерах текст из атрибута 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 */

Можно даже настроить плавное изменение прозрачности или изменение цвета сss-анимацией. Но с кроссбраузерностью таких решений могут возникнуть проблемы.

А что делать с бразуерами, которые не поддерживают атрибут placeholder в input? Ну точно не теряться) Да, действительно, такие браузеры есть. Например, IE8. И да, есть люди-адепты, которые будут им пользоваться всегда. Если нужна составить решение для всех посетителей, то наберитесь ещё немного терпения.

Для решения этой проблемы скачайте популярный для этого jquery плагин - jquery.placeholder. Ссылок давать не буду, так как сегодня-завтра они изменятся. Но, если что, можете скачать рабочий пример с плагином в - скачать исходники.

Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить.



$(function(){
$("input, textarea").placeholder();
});


input.placeholder, textarea.placeholder. { color: green; }

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

html

Стиль placeholder-a можно изменить с помощью такого набора css правил:

css ::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;}

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Смотрим, что получилось:

Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:

  • font (и сопутствующие свойства)
  • background (и сопутствующие свойства)
  • color
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • text-overflow
  • opacity
А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis . Такой синтаксис будет работать во всех новых браузерах.

css input {text-overflow:ellipsis;} input::-moz-placeholder {text-overflow:ellipsis;} input:-moz-placeholder {text-overflow:ellipsis;} input:-ms-input-placeholder {text-overflow:ellipsis;} Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

  • в некоторых браузерах при получении фокуса инпутом
  • в других браузерах при наличии хотя бы одного введенного символа

    • Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

    css :focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent} Скрываем placeholder красиво

    Можно также добавить transition для появления и скрытия placeholder-a:

    css /* плавное изменение прозрачности placeholder-а при фокусе */ .input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} /* сдвиг placeholder-а вправо при фокусе*/ .input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} /* сдвиг placeholder-а вниз при фокусе*/ .input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}

    Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

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

    Синтаксис

    Селектор ::placeholder { ... }

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

    placeholder body { background: #053f38; } input { border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ } input::-moz-placeholder { color: #ffd595; /* Цвет подсказывающего текста */ } input::-webkit-input-placeholder { color: #ffd595; } input:-ms-input-placeholder { color: #ffd595; } input::-ms-input-placeholder { color: #ffd595; } input::placeholder { color: #ffd595; }

    Результат примера показан на рис. 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 .

    Браузеры

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    Placeholder — псевдокласс или псевдоэлемент, который отвечает за вывод названия поля. По своей сути это тот тег (назовем его так для простоты) в который вы вписываете слово, а пользователь видит его внутри. Некое подобие подсказки или названия для каждого поля формы.

    Каждый браузер обрабатывает этот тег по своему, и стили его оформления оставляют желать лучшего. Чтобы изменить стили по умолчанию, достаточно добавить пару строк кода в файл стилей. Сложного ничего нет.
    Правда необходимо учитывать, что не все мы сможем поменять.

    Среди всего многообразия стилей, в данном случае нам доступны следующие вещи:
    • font-weight — установка жирности текста
    • font-size — выбор размера текста
    • font-family — выбор шрифта
    • background — фон и фоновое изображение
    • color — цвет текста
    • word-spacing — установка интервала между словами
    • letter-spacing — установка интервала между буквами
    • text-decoration — выбор украшения слов. Подчеркнутый, зачеркнутый и тд
    • vertical-align — установка вертикального выравнивания
    • text-transform — выбор изменения текста. Все заглавными или строчными буквами и тд
    • line-height — интервал между строками
    • text-indent — устанавливает отступ по левому краю у первой строки параграфа
    • text-overflow — выбор отображения текста, который не умещается в блоке (скрыть или обрезать и добавить многоточие)
    • opacity — выбор прозрачности элемента

    Теперь, когда мы разобрались в доступных стилях, можно приступить к оформлению, для этого добавим следующие стили:

    ::-webkit-input-placeholder { color: #2cb04d; }
    ::-moz-placeholder { color: #2cb04d; }/* Firefox 19+ */
    :-moz-placeholder { color: #2cb04d; } /*Firefox 18- */
    :-ms-input-placeholder { color: #2cb04d; }

    После добавления этих строк, изменится цвет названий внутри полей формы и в каждом браузере он будет одинаковый. Тут же можно дописать дополнительные стили.
    К примеру вот такой стиль

    ::-webkit-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}
    ::-moz-placeholder {color:#2cb04d; font-size:1.5em; font-weight:600;} /*Firefox 19+*/
    :-moz-placeholder {color:#2cb04d; font-size:1.5em; font-weight:600;} /*Firefox 18-*/
    :-ms-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}

    Добавит цвет, большой размер и среднюю жирность текста. Если добавить дополнительное свойство —
    text-overflow:ellipsis то текст будет обрезаться по размеру поля, в конце будет добавлено многоточие.

    Есть еще одно интересное свойство, благодаря появлению анимации в css (стилях) можно настроить красивое скрытие при установке курсора в поле. Раньше это делалось черз js (скрипты)

    Input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
    .input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
    .input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
    .input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
    .input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
    .input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
    .input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
    .input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}

    Добавление таких стилей позволит сделать плавное исчезновение placeholder-a при установки курсора в поле
    .input — это класс элемента формы. Для того чтобы стили сработали, код поля формы должен выглядить так:

    Или можно использовать класс элемента. Таким образом можно задавать разные стили для каждой формы.


    .contacts-form form input::-webkit-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}
    .contacts-form form input::-moz-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}/*Firefox 19+*/
    .contacts-form form input:-moz-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}/*Firefox 18-*/
    .contacts-form form input:-ms-input-placeholder {color: #2cb04d; font-size: 1.5em; font-weight: 600;}

    Вот такими нехитрыми способами можно сделать действительно красивое оформление формы.

    Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.
    Код поля ввода в нашем примере будет выглядеть примерно так:

    На выходе мы получает такое поле:

    Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:

    ::-webkit-input-placeholder { color: #c1c1c1; } ::-moz-placeholder { color: #c1c1c1; } /* Firefox 19+ */ :-moz-placeholder { color: #c1c1c1; } /* Firefox 18- */ :-ms-input-placeholder { color: #c1c1c1; }

    Получаем:

    Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
    font (так же смежные свойства)
    background (так же смежные свойства)
    color
    word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    text-indent
    text-overflow
    opacity

    В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.

    Сокращение текста в placeholder
    Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться дополнительными свойствами, которые позволят сократить текст placeholder-а в поле ввода.

    Input { text-overflow:ellipsis; } input::-moz-placeholder { text-overflow:ellipsis; } input:-moz-placeholder { text-overflow:ellipsis; } input:-ms-input-placeholder { text-overflow:ellipsis; }

    В результате получаем поле ввода такого с placeholder такого вида:

    Скрываем текст при клике по полю
    По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.

    :focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; }

    Получаем такое действо:

    Похожие статьи