Привет, сегодня использованием 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 color (в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .
Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pink; } :-moz-placeholder { /* Firefox 18- */ color: pink; }
Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.
Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:
input.big-dog::-webkit-input-placeholder { color: orange; }
Посмотреть пример
Разница между:placeholder-shown и::placeholder
:placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.
Взгляните на диаграмму:
Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .
Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом (например, можно изменять font-size ).
Обратите внимание: :placeholder-shown – псевдокласс (элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент (видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.
Так как :placeholder-shown является псевдоклассом, то он должен выделять существующий элемент. И поэтому выделяет форму ввода, когда текст в элементе формы отображается. Псевдоэлемент ::placeholder оборачивает сам текст заглушки.
Элемент или класс?
В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.
Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.
IE10 поддерживает этот функционал в качестве псевдокласса, а не элемента. Во всех остальных браузерах он расценивается как псевдоэлемент.
Цвет заглушки в Firefox
Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :
Так происходит потому, что по умолчанию все «заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:
::-moz-placeholder { opacity: 1; }
Попробуйте открыть это демо в браузере Firefox .
Поддержка стилей
Псевдоэлемент поддерживает следующие свойства:
- font properties ;
- color ;
- background properties ;
- word-spacing ;
- letter-spacing ;
- text-decoration ;
- vertical-align ;
- text-transform ;
- line-height ;
- text-indent ;
- opacity ;
Дополнительные ресурсы
Документация MDN
Документация IE
Развёрнутая статья на блоге Treehouse
Если вы не знакомы с атрибутом 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; }
Получаем такое действо:
Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом 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 цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows