Цвет placeholder css. Как изменить цвет замещающего текста поля формы
Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот - это атрибут 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; }
/* и так далее... */
: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
- Темы 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 на ваш сервер.
Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом 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.
По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но placeholder позволяет реализовать исчезновение сразу при фокусировке на поле. Для этого необходимо совместить его с псевдоклассом:focus.
Input:focus::placeholder { color: transparent; }
В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.
Input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }
В браузере Google Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.