Как поменять цвет placeholder input. Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS? Задача: сделать свой css стиль для placeholder

Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.

Задача: сделать свой css стиль для placeholder

Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.

Решение: css стиль для placeholder

Итак, задачу мы поставили, как же будем её решать?

Сначала сделаем полигон для тестирования:

Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:

Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):

Input{ width: 250px; color: blue; font-weight: normal; font-style: normal; }

Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):

Input::-webkit-input-placeholder{ color: red; font-style: italic; font-weight: bold; }

Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.

Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:

Input:-moz-placeholder{ color: red; font-style: italic; font-weight: bold; }

Готово. CSS стиль для placeholder, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на jsFiddle или чуть ниже:

Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.

У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие - вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:

• изменение стиля плейсхолдера;
• скрытие сразу при нажатии на поле;
• отображение в браузерах, которые не поддерживают атрибут.

Для примера возьмём текстовое поле input и будем применять к нему стили.

Изменение цвета placeholder

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

::-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 */

Если не указать «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 плагин.

Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с атрибутом «placeholder»:

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

Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.

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

Где находится плейсхолдер?

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

Стилизация placeholder на CSS выглядит так:

Input::placeholder { color: red; opacity: 1; font-style: italic; }

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

Псевдоэлемент CSS placeholder хорошо обрабатывается всеми современными браузерами, а для поддержки старых обозревателей можно воспользоваться префиксами:

• ::-webkit-input-placeholder - для webkit-браузеров (Safari, Chrome, Opera);
• ::-moz-placeholder - для браузеров Firefox выше 19 версии;
• :-moz-placeholder - для старых Firefox;
• :-ms-input-placeholder - для Internet Explorer выше 10 версии.

Как видно, старые браузеры Mozilla, а также IE считают placeholder CSS-псевдоклассом, а не псевдоэлементом. Не будем с ними спорить, просто учтем этот аспект при стилизации поля ввода.

Возможности стилизации

Для псевдоэлемента placeholder в CSS можно установить следующие параметры:

• фон - группа блока подсказки распространяется на все поле ввода. Можно задать не только цвет (background-color), но и изображение (background-image).
• цвет текста - color;
• прозрачность - opacity;
• подчеркивание, надчеркивание или зачеркивание - text-decoration;
• регистр - text-transform;
• внутренние отступы - padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.
• отображение шрифта - свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);
• вертикальное выравнивание в строке - vertical-align;
• обрезка текста при переполнении контейнера - text-overflow.

.input1::placeholder { background-image: linear-gradient(lime, blue); color: white; } .input2::placeholder { text-decoration: line-through; color: purple; font-weight: bold; } .input3::placeholder { font-size: 16px; letter-spacing: 10px; } .input4::placeholder { background: brown; color: white; text-overflow: ellipsis; } В фокусе

По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но placeholder позволяет реализовать исчезновение сразу при фокусировке на поле. Для этого необходимо совместить его с псевдоклассом:focus.

Input:focus::placeholder { color: transparent; }

В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.

Input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }

В браузере Google Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.

Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот - это атрибут 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 text color) поля формы.

Замещающий текст поля формы содержит подсказку, которая указывает ожидаемые данные в поле. Это может быть пример или краткое описание ожидаемой информации. Краткая подсказка отображается в поле до того, как пользователь начнёт вводить данные.

По умолчанию, замещающий текст светло-серый (таким его отображают браузеры). Для того чтобы добавить к этому тексту пользовательские стили, Вам нужно будет использовать браузерные префиксы для свойств CSS.

Для того чтобы изменить цвет замещающего текста, следуйте таким инструкциям:

Составьте код в соответствии со следующей информацией (обратите внимание, что Вам необходимо добавить один и тот же код 4 раза для каждого браузерного префикса):

Выберите файл, в который Вы добавите код. Вы можете добавить его в любой файл CSS вашего сайта, но мы приготовили для Вас список файлов, в которые рекомендуется добавлять правила CSS для разных типов движков сайтов:

Шаблоны CMS:

• Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
• Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
• Темы Drupal /sites/all/themes/themeXXX/css/style.css
• Шаблоны Web (HTML5) /css/style.css

Шаблоны E-commerce:

• Темы Magento /skin/frontend /default/themeXXX/css/styles.css
• Темы PrestaShop /themes/themeXXXX/css/global.css
• Темы OpenCart /catalog/view/theme/themeXXX/stylesheet /stylesheet .css
• Темы ZenCart /includes/templates/themeXXX/css/stylesheet .css
• Шаблоны osCommerce /css/stylesheet .css
• Шаблоны Shopify style.css.liquid

Сохраните изменения и загрузите файлы CSS на ваш сервер.