Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS.

Псевдоэлемент::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 используется для создания подсказок внутри пустых полей ввода (теги и ). В этой статье я рассмотрю способы стилизации плэйсхолдеров, а также, как сделать их более удобными в использовании.</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>Выглядит ужасно, не так ли? И на это есть причина - до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse .</p> <p>Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:</p> @mixin placeholder { & : :- webkit-input-placeholder { @content ; } & : - moz-placeholder { @content ; } & : :- moz-placeholder { @content ; } & : - ms-input-placeholder { @content ; } } <p>В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на 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>Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:</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>Чем больше ширина поля ввода, тем больше должно быть значение свойства 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>Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом ():</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>Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer . С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:</p> ::placeholder { color : orange ; } . input : : placeholder { color : blue ; } <p>После парсинга ваших стилей Autoprefixer создаст отдельный CSS файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.</p> <h2>Что дальше</h2> <p>Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).</p> <p>Применять стили с помощью:placeholder-shown будет гораздо проще:</p> .input :placeholder-shown { color : blue ; } <p>Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. CSS стиль для placeholder, мы и постараемся сегодня прописать.</p><p><img src='https://i0.wp.com/htmler.ru/wp-content/uploads/2014/08/htmler_css_placeholder.jpg' width="100%" loading=lazy></p><h2>Задача: сделать свой css стиль для placeholder</h2><p>Допустим у нас есть стильный сайт, в котором в input используется placeholder. Нам нужно сделать так, чтобы серый муторный стиль текста placeholder’a выглядел в общем стиле сайта. Как же этого достичь? Сразу скажу, что это работает пока не во всех браузерах. Конкретно в IE версии 9 и ниже не работает вообще, в 10 и далее пока работает с большими трудностями. Другое дело Firefox и webkit-браузеры.</p><h2>Решение: css стиль для placeholder</h2><p>Итак, задачу мы поставили, как же будем её решать?</p><p>Сначала сделаем полигон для тестирования:</p><p> <input type="text" name="input" placeholder="Текст нашего placeholder" value="" /> </p><p>Готово, теперь посмотрим, что можно сделать со стилем: у webkit и mozilla есть собственные модификаторы, которые позволяют назначать особенный стиль для placeholder: ::-webkit-input-placeholder и:-moz-placeholder. Посмотрим как их использовать:</p><p>Опишем стиль самого input и текст в нем (синий цвет для контраста в примере):</p><p>Input{ width: 250px; color: blue; font-weight: normal; font-style: normal; } </p><p>Теперь пропишем специальный стиль для текста placeholder в этом input для Webkit браузеров (Chrome, Safari, Opera):</p><p>Input::-webkit-input-placeholder{ color: red; font-style: italic; font-weight: bold; } </p><p>Сделаем текст плейсхолдера красным жирным курсивом. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.</p><p>Теперь пропишем точно такой же стиль для Mozilla Firefox браузеров:</p><p>Input:-moz-placeholder{ color: red; font-style: italic; font-weight: bold; } </p><p>Готово. CSS стиль для placeholder, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на jsFiddle или чуть ниже:<br></p><p>Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.</p> <p>Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.<br> Код поля ввода в нашем примере будет выглядеть примерно так:</p><p> <input type="text" placeholder="Введите ваше имя"> </p><p>На выходе мы получает такое поле: <input type="text" placeholder="Введите ваше имя"></p> <p>Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:</p><p> ::-webkit-input-placeholder { color: #c1c1c1; } ::-moz-placeholder { color: #c1c1c1; } /* Firefox 19+ */ :-moz-placeholder { color: #c1c1c1; } /* Firefox 18- */ :-ms-input-placeholder { color: #c1c1c1; } </p><p>Получаем: <input class="plc" type="text" placeholder="Введите ваше имя"></p> <p>Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:<br><b>font </b> (так же смежные свойства)<br><b>background </b> (так же смежные свойства)<br><b>color </b><br><b>word-spacing </b><br><b>letter-spacing </b><br><b>text-decoration </b><br><b>vertical-align </b><br><b>text-transform </b><br><b>line-height </b><br><b>text-indent </b><br><b>text-overflow </b><br><b>opacity </b></p> <p>В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.</p><p><b>Сокращение текста в placeholder </b><br> Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться дополнительными свойствами, которые позволят сократить текст placeholder-а в поле ввода.</p><p>Input { text-overflow:ellipsis; } input::-moz-placeholder { text-overflow:ellipsis; } input:-moz-placeholder { text-overflow:ellipsis; } input:-ms-input-placeholder { text-overflow:ellipsis; } </p><p>В результате получаем поле ввода такого с placeholder такого вида: <input class="plc2" type="text" placeholder="Введите ваше имя"></p><p><b>Скрываем текст при клике по полю </b><br> По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.</p><p> :focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; } </p><p>Получаем такое действо: </p> <p>Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом CSS placeholder.</p> <h2>Где находится плейсхолдер?</h2> <p>Проблема в том, что подсказка поля ввода надежно спрятана в теневом DOM, и добраться до нее не так-то просто. Для этого используется особый нестандартный ::placeholder. С его помощью можно управлять свойствами подсказки.</p> <p>Стилизация placeholder на CSS выглядит так:</p><p>Input::placeholder { color: red; opacity: 1; font-style: italic; } </p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy></p> <h2>Поддержка браузерами</h2> <p>Псевдоэлемент CSS placeholder хорошо обрабатывается всеми современными браузерами, а для поддержки старых обозревателей можно воспользоваться префиксами:</p> <ul><li>::-webkit-input-placeholder - для webkit-браузеров (Safari, Chrome, Opera);</li> <li>::-moz-placeholder - для браузеров Firefox выше 19 версии;</li> <li>:-moz-placeholder - для старых Firefox;</li> <li>:-ms-input-placeholder - для Internet Explorer выше 10 версии.</li> </ul><p>Как видно, старые браузеры Mozilla, а также IE считают placeholder CSS-псевдоклассом, а не псевдоэлементом. Не будем с ними спорить, просто учтем этот аспект при стилизации поля ввода.</p> <p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy></p> <h2>Возможности стилизации</h2> <p>Для псевдоэлемента placeholder в CSS можно установить следующие параметры:</p> <ul><li>фон - группа блока подсказки распространяется на все поле ввода. Можно задать не только цвет (background-color), но и изображение (background-image).</li> <li>цвет текста - color;</li> <li>прозрачность - opacity;</li> <li>подчеркивание, надчеркивание или зачеркивание - text-decoration;</li> <li>регистр - text-transform;</li> <li>внутренние отступы - padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.</li> <li>отображение шрифта - свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);</li> <li>вертикальное выравнивание в строке - vertical-align;</li> <li>обрезка текста при переполнении контейнера - text-overflow.</li> </ul> .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; } <h2>В фокусе</h2> <p>По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но placeholder позволяет реализовать исчезновение сразу при фокусировке на поле. Для этого необходимо совместить его с псевдоклассом:focus.</p><p>Input:focus::placeholder { color: transparent; } </p><p>В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.</p><p>Input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; } </p><p>В браузере Google Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <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> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="Поиск" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Свежие записи</span></h3> <ul> <li> <a href="/services/kak-na-androide-pereklyuchit-pamyat-na-kartu-kak-sdelat-tak-chtoby-vse.html">Как сделать так, чтобы все сохранялось на карту памяти</a> </li> <li> <a href="/rates/kak-s-pomoshchyu-kompasa-nastroit-sputnikovuyu-antennu.html">Подключение спутникового ресивера к телевизору</a> </li> <li> <a href="/rostelecom/ne-zagruzhaet-gugl-plei-na-telefone-ne-rabotaet-play-market-podklyuchenie.html">Не работает Play Market, подключение отсутствует</a> </li> <li> <a href="/tele2/ustanovka-melodii-na-otdelnyi-kontakt-na-android-kak-postavit-melodiyu-na.html">Как поставить мелодию на контакт на "Андроид": советы, рекомендации, инструкции Как установить мелодию на группу контактов андроид</a> </li> <li> <a href="/internet/plei-market-versiya-2-3-6-servisy-google-play-vozmozhnosti-i-osobennosti.html">Плей маркет версия 2.3 6. Сервисы Google Play. Возможности и особенности приложения Сервисы гугл плей</a> </li> <li> <a href="/megaphone/upravlenie-linux-cherez-web-administrirovanie-linux-vvedenie-v-webmin-nastroika.html">Управление linux через web</a> </li> <li> <a href="/services/chto-delat-esli-v-nedforspid-chernyi-ekran-pochemu-nfs-rivals-ne.html">Почему NFS Rivals не запускается?</a> </li> <li> <a href="/beeline/ne-pokazyvaet-cifrovoe-kabelnoe-televidenie-kak-opredelit-pochemu-ne-rabotaet.html">Как определить, почему не работает цифровое телевидение</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> <div id="pugoza1" style="height:500px;width:300px;" align="center"></div> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> <div id="pugoza2" style="height:500px;width:300px;" align="center"></div> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">© 2024 <a href="/" title="thetarif.ru"><span>thetarif.ru</span></a>. Мобильные операторы и тарифы.<br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.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://thetarif.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://thetarif.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">Есть вопросы?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name"> Имя </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email"> Email <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message"> Сообщение <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none">