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

Атрибут 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>В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для <a href="/settings/kak-fotografirovat-ekran-na-noutbuke-kak-sfotografirovat.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="/internet/svoistva-filtrov-css-dlya-versii-firefox-css3-filtry-izmenyaem.html">CSS свойство</a> можно использовать с плэйсхолдерами. Вот <a href="/phone/prizovye-mashiny-v-gran-turismo-6-gran-turismo-sport-poyavilsya-spisok-vseh-mashin-iz-igry-polnyi.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="/settings/svoistva-css-dlya-oformleniya-teksta-html-vertical-align-text-align-text-indent-i-drugie-css.html">свойства text-indent</a> . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и <a href="/services/kakie-znacheniya-mozhet-prinimat-atribut-align-svoistva-css-dlya.html">значения text-indent</a> зависит скорость анимации. Для сдвига влево нужно использовать <a href="/rates/html-vydelenie-vydelenie-teksta-zhirnym-kursivom-i-cvetom-kak-vydelit.html">отрицательные значения</a>, например -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 . К сожалению, с помощью <a href="/settings/absolyutnyi-blok-po-centru-vyravnivanie-elementov-vyravnivanie-svoistvom.html">свойства line-height</a> невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.</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 файл превратился в кашу из префиксов для всех <a href="/phone/ne-obnovlyaetsya-internet-explorer-obnovlenie-ie8-do-ie9-vozmozhnye-oshibki-obnovleniya.html">возможных браузеров</a>, то обратите внимание на Autoprefixer . С его помощью <a href="/phone/podklyuchenie-i-primery-ispolzovaniya-animate-css-logotipy-na-chistom-css.html">чистый CSS</a> можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:</p> ::placeholder { color : orange ; } . input : : placeholder { color : blue ; } <p>После парсинга ваших стилей Autoprefixer создаст <a href="/services/podklyuchenie-vneshnego-css-prisoedinit-faily-css-stilei-k-veb-stranice.html">отдельный CSS</a> файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.</p> <h2>Что дальше</h2> <p>Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).</p> <p>Применять стили с помощью:placeholder-shown будет гораздо проще:</p> .input :placeholder-shown { color : blue ; } <p>Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с <a href="/rates/ajax-skachat-fail-s-servera-zagruzka-faila-na-server-s-pomoshchyu.html">помощью javascript</a>, <a href="/internet/oblachnoe-nablyudenie-ivideon-ivideon-vhod-v-lichnyi-kabinet-polozhitelnye-storony.html">положительная сторона</a> <a href="/rates/kodirovanie-i-szhatie-dannyh-obzor-metodov-szhatiya-dannyh-szhatie.html">данного метода</a> это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в <a href="/settings/chto-takoe-input-gruppirovka-elementov-formy-sozdanie-polei.html">элементах input</a> и 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>Изменять мы можем не все свойства, но список большинства из них, поддерживаемых <a href="/phone/skachat-vysokoskorostnoi-brauzer-s-rezhimom-turbo-chto-takoe-rezhim-turbo.html">современными браузерами</a> приведен ниже:<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>В <a href="/phone/kak-pomenyat-razmer-stranicy-v-brauzere-kak-uvelichit-masshtab.html">разных браузерах</a> правило пишется по разному, т.к. пока нет <a href="/internet/obnaruzhenie-onvif-ustroistv-v-seti-onvif-chto-eto-takoe-sozdanie.html">единого стандарта</a>, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых <a href="/internet/flashgot-mass-downloader-dopolneniya-firefox-rasshirenie-flashgot-dlya-brauzera-firefox-osnovnye.html">браузерах firefox</a>, webkit и blink воспринимается как псевдоэлемент.</p><p><b>Сокращение текста в placeholder </b><br> Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться <a href="/settings/kak-dobavit-vpn-podklyuchenie-dopolnitelnye-svoistva-soedineniya.html">дополнительными свойствами</a>, которые позволят сократить <a href="/internet/kak-izmenit-cvet-placeholder-kak-izmenit-cvet-teksta-podskazki-v-placeholder.html">текст placeholder-а</a> в поле ввода.</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>Из этого туториала Вы узнаете, как изменить <b>цвет замещающего текста </b> (placeholder text color) поля формы.</p><p>Замещающий текст поля формы содержит подсказку, которая указывает ожидаемые данные в поле. Это может быть пример или <a href="/phone/maikrosoft-ofis-dlya-8-1-libreoffice-i-kratkoe-opisanie-vzaimodeistvie-s-proshlymi.html">краткое описание</a> ожидаемой информации. Краткая подсказка отображается в поле до того, как пользователь начнёт вводить данные.</p><p>По умолчанию, замещающий текст светло-серый (таким его отображают браузеры). Для того чтобы добавить к этому тексту <a href="/rates/list-style-type-cvet-primenenie-polzovatelskih-stilei-k.html">пользовательские стили</a>, Вам нужно будет использовать браузерные префиксы для свойств CSS.</p><p>Для того чтобы изменить цвет замещающего текста, следуйте таким инструкциям:</p><ol><p>Составьте код в соответствии со <a href="/rates/po-forme-predstavleniya-razlichayut-sleduyushchie-vidy-informacii.html">следующей информацией</a> (обратите внимание, что Вам необходимо добавить один и тот же код 4 раза для каждого браузерного префикса):</p><p>Выберите файл, в который Вы добавите код. Вы можете добавить его в любой файл CSS вашего сайта, но мы приготовили для Вас список файлов, в которые рекомендуется добавлять <a href="/internet/sintaksis-css-i-zapis-svoistv-sintaksis-css-pravila-css-u-etogo-zagolovka-sinii.html">правила CSS</a> для <a href="/rates/alcatel-onetouch-pop-d5---tehnicheskie-harakteristiki-informaciya-o-tipe-gromkogovoritelei-i-podderzhi.html">разных типов</a> движков сайтов:</p><h5>Шаблоны CMS:</h5><ul><li>Темы WordPress (Темы WooCommerce/Jigoshop) <i>/wp-content/themes/themeXXXXX/style.css </i></li><li>Шаблоны Joomla (Шаблоны VirtueMart) <i>/templates/themeXXXX/css/template.css </i></li><li>Темы Drupal <i>/sites/all/themes/themeXXX/css/style.css </i></li><li>Шаблоны Web (HTML5) <i>/css/style.css </i></li> </ul><h5>Шаблоны E-commerce:</h5><ul><li>Темы Magento <i>/skin/frontend /default/themeXXX/css/styles.css </i></li><li>Темы PrestaShop <i>/themes/themeXXXX/css/global.css </i></li><li>Темы OpenCart <i>/catalog/view/theme/themeXXX/stylesheet /stylesheet .css </i></li><li>Темы ZenCart <i>/includes/templates/themeXXX/css/stylesheet .css </i></li><li>Шаблоны osCommerce <i>/css/stylesheet .css </i></li><li>Шаблоны Shopify <i>style.css.liquid </i></li> </ul></li><li><p>Сохраните изменения и загрузите <a href="/phone/vklyuchenie-css-v-html-kod-ssylka-na-css-fail-vnutri-na-fail-etogo-zhe.html">файлы CSS</a> на ваш сервер.</p> </ol> <p>Привет, сегодня использованием placeholder у input уже никого не удивишь. Placeholder — это такой временный текст с примером внутри input, который исчезает при вводе текста. <a href="/internet/html-option-select-css-gotovyi-stil-css-oformlenie-select-ispolzuem.html">CSS стиль</a> для 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. Нам нужно сделать так, чтобы серый муторный стиль <a href="/rates/kak-izmenit-cvet-v-placeholder-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s-pomoshchyu.html">текста placeholder</a>’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 и текст в нем (<a href="/settings/domashnie-sposoby-vosstanovleniya-cveta-odezhdy-svoimi-rukami.html">синий цвет</a> для контраста в примере):</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>Сделаем текст плейсхолдера красным <a href="/settings/vydelen-krasnym-cvetom-html-vydelenie-vydelenie-teksta-zhirnym-kursivom-i.html">жирным курсивом</a>. Обратите внимание, в отличие от других псевдо-классов CSS, которые отделяются одинарным двоеточием, стиль для placeholder в webkit отделяется двойным двоеточием.</p><p>Теперь пропишем точно такой же стиль для <a href="/internet/nachalnaya-stranica-mozilla-firefox-nachalo-raboty-s-mozilla-firefox-zagruzka-i.html">Mozilla Firefox</a> браузеров:</p><p>Input:-moz-placeholder{ color: red; font-style: italic; font-weight: bold; } </p><p>Готово. CSS стиль для placeholder, естественно вы можете прописать любой, какой больше подходит для вашего дизайна. Рабочее демо можно посмотреть на jsFiddle или чуть ниже:<br></p><p>Надеюсь, эта статья поможет вам сделать ваш сайт более удобным для пользователей.</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 class="single-popular"> <div class="single-popular-tit col-lg-12"> Популярное в рубрике: </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп"/ loading=lazy> <div class="single-popular-item-tit"> Как объединить слои в фотошопе в один или соединить их в группу... </div> <a href="/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Перенос контактов на новый телефон android"/ loading=lazy> <div class="single-popular-item-tit"> Перенос контактов на новый телефон android </div> <a href="/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Перенос контактов на новый телефон android">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе"/ loading=lazy> <div class="single-popular-item-tit"> Самсунг Галакси перезагружается сам по себе — Решения Galaxy note... </div> <a href="/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Основные возможности Kaspersky Rescue Disk"/ loading=lazy> <div class="single-popular-item-tit"> Основные возможности Kaspersky Rescue Disk </div> <a href="/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Основные возможности Kaspersky Rescue Disk">читать</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div>  <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">Последние Статьи</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Макбук не подключается к wifi Макбук не видит...</div> <div class="clr"></div> <a href="/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Как заработать на WebMoney</div> <div class="clr"></div> <a href="/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">"Супра", планшет: отзывы покупателей</div> <div class="clr"></div> <a href="/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Местонахождения судов в реальном времени</div> <div class="clr"></div> <a href="/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Лучшие программы для Android Запись звонков от...</div> <div class="clr"></div> <a href="/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Удаляем не читателей в Твиттере</div> <div class="clr"></div> <a href="/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Подключаем интернет на ноутбуке: все возможные...</div> <div class="clr"></div> <a href="/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV – новый флагман...</div> <div class="clr"></div> <a href="/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">читать</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy> <div class="footer-contacts-tit">innovakon.ru<br>Мобильные телефоны и связь</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Редакция проекта</a></li> <li><a href="">Реклама на сайте</a></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="/sitemap.xml">Карта сайта</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Мобильные телефоны и связь</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Scroll to Top">Top</a> <script type='text/javascript' src='https://innovakon.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://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> </body> </html>