НТВ плюс 

Цвет input css. Добавляем CSS стиль для placeholder. Цвет заглушки в Firefox


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

    Привет, сегодня использованием 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 или чуть ниже:

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

    Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом 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, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с помощью 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; }

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