Как задать цвет placeholder в input css. Как изменить цвет замещающего текста поля формы. А что делать с бразуерами, которые не поддерживают атрибут placeholder в input

Из этого туториала Вы узнаете, как изменить цвет замещающего текста (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

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

Если вы не знакомы с атрибутом 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; }

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

Привет, сегодня использованием 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 используется для создания подсказок внутри пустых полей ввода (теги и ). В этой статье я рассмотрю способы стилизации плэйсхолдеров, а также, как сделать их более удобными в использовании.</p> <p>Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>При разработке интерфейсов следует учитывать особенности поведения плэйсхолдеров. Текст плэйсхолдера исчезает, как только начинается ввод. Именно поэтому не стоит использовать их для передачи информации о самом поле ввода (сколько и какие именно символов оно должно содержать). Для данных целей лучше всего использовать тег <label> или параграф с небольшой подсказкой. Подробнее об особенностях использования плэйсхолдеров можно почитать .</p> <h2>Стилизация</h2> <p>Для стилизации плэйсхолдеров используются следующие правила:</p> ::-webkit-input-placeholder { color : blue ; } ::-moz-placeholder { color : blue ; } /* Firefox 19+ */ :-moz-placeholder { color : blue ; } /* Firefox 18- */ :-ms-input-placeholder { color : blue ; } <p>Выглядит ужасно, не так ли? И на это есть причина - до сих пор <a href="/css-selektory-pravila-specialnye-selektory-v-css-sosednie-dochernie-kontekstnye.html">CSS правила</a> для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse .</p> <p>Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:</p> @mixin placeholder { & : :- webkit-input-placeholder { @content ; } & : - moz-placeholder { @content ; } & : :- moz-placeholder { @content ; } & : - ms-input-placeholder { @content ; } } <p>В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для <a href="/kuda-zahodit-chtob-suzit-ekran-na-kompe-kak-umenshit-masshtab.html">отдельных элементов</a> (опробуйте на SassMeister):</p> <span>// Глобально для каждого поля ввода </span>@include placeholder { color : blue ; } <span>// Для определённых полей ввода </span>.input { @include placeholder { color : green ; } } <h4>Пример</h4> <p>Синий текст для плэйсхолдера (никогда так не делайте):</p> .blue-text ::-webkit-input-placeholder { color : #2e8ece ; } .blue-text :-moz-placeholder { color : #2e8ece ; } .blue-text ::-moz-placeholder { color : #2e8ece ; } .blue-text :-ms-input-placeholder { color : #2e8ece ; } <p> <input type="text" placeholder="Начните печатать здесь" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Поддерживаемые свойства</h2> <p>Не каждое <a href="/vse-svoistva-css-s-opisaniem-i-primerami-osnovnye-css-svoistva-po-kategoriyam.html">CSS свойство</a> можно использовать с плэйсхолдерами. Вот <a href="/skachat-vaiber-na-programmu-simbian-vaiber-dlya-simbian.html">полный список</a> поддерживаемых свойств:</p> <ul><li>font и все связанные свойства (font-size , font-family и т.д.)</li> <li>background и все связанные свойства (background-color , background-image и т.д.)</li> <li>opacity</li> <li>text-indent</li> <li>text-overflow</li> <li>color</li> <li>text-transform</li> <li>line-height</li> <li>word-spacing</li> <li>letter-spacing</li> <li>text-decoration</li> <li>vertical-align</li> </ul><h2>Анимации</h2> <p>Идеи анимаций принадлежит блогу html5.by .</p> <p>Все следующие примеры написаны с использованием препроцессора Sass . К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.</p> <p>Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder:</p> .input { @include placeholder { <span>// Стили для нормального состояния </span> } & :focus { @include placeholder { <span>// Стили после события focus </span> } } } <h3>Изменение прозрачности</h3> .input { @include placeholder { color : #aaa ; opacity : 1 ; transition : opacity 300ms ; } & :focus { @include placeholder { opacity : 0 ; } } } <p> <input type="text" placeholder="Демо: изменение прозрачности" class="demo-css-placeholders-input pl-opacity"></p> <h3>Сдвиг вправо и влево</h3> <p>Чем <a href="/po-shirine-bolshie-probely-mezhdu-slovami-kak-ubrat-lishnie.html">больше ширина</a> поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .</p><p> <input type="text" placeholder="Демо: сдвиг вправо" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Демо: сдвиг влево" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Сдвиг вниз</h3> <p>Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.</p> .input { @include placeholder { text-indent : 0px ; transition : text-indent 300ms ; } & :focus { @include placeholder { text-indent : 500px ; } } } <p> <input type="text" placeholder="Демо: сдвиг вниз" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Всё вместе</h3> <p>Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит <a href="/kommentarii-v-html-oformlyayutsya-sleduyushchim-obrazom-chto-takoe.html">следующим образом</a> ():</p> @mixin placeholder { & : :- webkit-input-placeholder { @content } & : - moz-placeholder { @content } & : :- moz-placeholder { @content } & : - ms-input-placeholder { @content } } @mixin pl-shift ($side : left , $position : 500px , $duration : 200ms ) { @include placeholder { text-indent : 0 ; transition : text-indent $duration ; } & :focus { @include placeholder { text-indent : if ($side == left , - $position , $position ); } } } @mixin pl-slide-down ($position : 5 , $duration : 200ms ) { @include placeholder { line-height : 1 ; transition : line-height $duration ; } & :focus { @include placeholder { line-height : $position ; } } } @mixin pl-fade-out ($duration : 200ms ) { @include placeholder { opacity : 1 ; transition : opacity $duration ; } & :focus { @include placeholder { opacity : 0 ; } } } <p>Использовать её очень просто. Достаточно подключить желаемый миксин к любому полю ввода или просто создать одно глобальное правило для всех пэйсхолдеров на странице:</p> <span>// Для отдельных элементов </span>.pl-shift-right { @include pl-shift ( right ); } .pl-fade-out { @include pl-fade-out ; } <span>// Для всего остального </span>@include pl-shift ( left ); <h2>Autoprefixer</h2> <p>Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный <a href="/kakoi-teg-ispolzuetsya-dlya-opisaniya-stilei-sovety-vebmasteru-podklyuchenie.html">CSS файл</a> превратился в кашу из префиксов для всех <a href="/pochemu-ne-otkryvaetsya-yandeks-brauzer-vozmozhnye-prichiny-i-sposoby.html">возможных браузеров</a>, то обратите внимание на Autoprefixer . С его помощью <a href="/css-modalnoe-okno-perekryvayushchee-stranicu-modalnoe-okno-na-chistom-css-sozdanie-css.html">чистый CSS</a> можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:</p> ::placeholder { color : orange ; } . input : : placeholder { color : blue ; } <p>После парсинга ваших стилей Autoprefixer создаст <a href="/otkrytie-v-otdelnom-okne-html-css-menyaem-stil-dlya-ssylok.html">отдельный CSS</a> файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.</p> <h2>Что дальше</h2> <p>Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).</p> <p>Применять стили с помощью:placeholder-shown будет гораздо проще:</p> .input :placeholder-shown { color : blue ; } <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="col-sm-4"> <aside> <p class="h2 bold"> Реклама </p> <div class="line"></div> <div id="vagize2" style="height:500px;width:300px;" align="center"></div> <div class="subscribe block"> <p class="h2 bold"> Подпишитесь на новости </p> <div class="line"></div> <form class="form-horizontal form" action="/" method="post" target="popupwindow"> <div class="group"> <div class="input"> <input type="text" name="subscribe_email" class="form-control" placeholder="Введите e-mail" /> <div class="helper"></div> </div> </div> <div class="group"> <input type="submit" class="btn btn-base btn-big" value="Подписаться на новости" /> </div> </form> </div> <div class="adv block"> <div class="adv_track" data-id="aside"> <div class="adv_block adsense_3"> </div> </div> </div> </aside> </div> </div> </article> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.0.3'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.0.2'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/light/js/jquery.fancybox.pack.js?ver=4.3.14'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/light/js/light.js?ver=4.3.14'></script> <footer> <div class="footer"> <div class="row"> <div class="menu"> <nav class="navbar navbar-moto-footer"> <div class="row"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bottom_menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bottom_menu"> <ul id="menu-footer" class="nav navbar-nav navbar-first"> <li><a href="/category/ntv-plus/">НТВ плюс</a></li> <li><a href="/category/tricolor/">Триколор</a></li> <li><a href="/category/smart-tv/">Смарт ТВ</a></li> <li><a href="/category/tv/">Телевизор</a></li> </ul> </div> </div> </div> </nav> </div> <div class="to_top"> <div class="top_btn"> <i class="fa fa-angle-up"></i> </div> </div> </div> <div class="row"> <div class="col-sm-6"> © 2024 <span class="bold">erfa.ru</span> - Все о телевидении. </div> <div class="col-sm-6 text-right social_block" itemscope itemtype="http://schema.org/Organization"> <link itemprop="url" href="/" /> <a itemprop="sameAs" href="https://www.facebook.com/sharer/sharer.php?u=https://erfa.ru/kak-zadat-cvet-placeholder-v-input-css-kak-izmenit-cvet-zameshchayushchego-teksta-polya-formy-a.html"> <i class="fa fa-facebook"></i> </a> <a itemprop="sameAs" href="https://vk.com/share.php?url=https://erfa.ru/kak-zadat-cvet-placeholder-v-input-css-kak-izmenit-cvet-zameshchayushchego-teksta-polya-formy-a.html"> <i class="fa fa-vk"></i> </a> <a itemprop="sameAs" href="https://www.twitter.com/share?url=https://erfa.ru/kak-zadat-cvet-placeholder-v-input-css-kak-izmenit-cvet-zameshchayushchego-teksta-polya-formy-a.html"> <i class="fa fa-twitter"></i> </a> <a itemprop="sameAs" href="https://connect.ok.ru/offer?url=https://erfa.ru/kak-zadat-cvet-placeholder-v-input-css-kak-izmenit-cvet-zameshchayushchego-teksta-polya-formy-a.html"> <i class="fa fa-odnoklassniki"></i> </a> <a itemprop="sameAs" href=""> <i class="fa fa-google-plus"></i> </a> </div> </div> </div> </footer> </div> </div> </div> </body> </html> </div> </div>