Оформление placeholder css. Добавляем CSS стиль для placeholder

Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом CSS placeholder.

Где находится плейсхолдер?

Проблема в том, что подсказка поля ввода надежно спрятана в теневом DOM, и добраться до нее не так-то просто. Для этого используется особый нестандартный псевдоэлемент CSS::placeholder. С его помощью можно управлять свойствами подсказки.

Поддержка браузерами

Псевдоэлемент 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-свойств. Фон блока подсказки распространяется на все поле ввода. Можно задать не только цвет (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; }

В фокусе

По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но псевдоэлемент CSS placeholder позволяет реализовать исчезновение сразу при фокусировке на поле. Для этого необходимо совместить его с псевдоклассом:focus.

input:focus::placeholder { color: transparent; }

В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.

input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }

В браузере Google Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.

Placeholders, those frequently grayed out text elements inside an input, can be a pain to style. Fortunately we"ve sourced a short but effective CSS solution to style your input"s placeholder text any color and opacity you wish. Read on for the code.

Changing placeholder text color

Let"s start with a simple input and some placeholder text, for this example we"ll use the word "search" but you can use anything you want. The basic HTML is below:

HTML

Input (and textarea) placeholder text defaults to a light gray color, however, we can change that with a few lines of CSS. Here we"ll color the input text red using an HTML color name, but any color method will suffice (HEX, RGB, HSL).

CSS

::-webkit-input-placeholder { /* Chrome */ color: red; } :-ms-input-placeholder { /* IE 10+ */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; } :-moz-placeholder { /* Firefox 4 - 18 */ color: red; opacity: 1; }

Note that it"s important to include the different vendor prefixes in order to support as many browsers as possible. Only Firefox"s input placeholder text defaults to a slight transparency so its unnecessary to set the opacity property on IE or Chrome.

Changing placeholder focus text color

Alright, we"ve successfully changed the color of the placeholder text to red, but it would be nice if something happened when a user clicks inside our input. Using the same vendor prefixed CSS properties, we can alter the opacity of the input placeholder text on focus.

CSS

input { outline: none; padding: 12px; border-radius: 3px; border: 1px solid black; } ::-webkit-input-placeholder { /* Chrome */ color: red; transition: opacity 250ms ease-in-out; } :focus::-webkit-input-placeholder { opacity: 0.5; } :-ms-input-placeholder { /* IE 10+ */ color: red; transition: opacity 250ms ease-in-out; } :focus:-ms-input-placeholder { opacity: 0.5; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; } :focus::-moz-placeholder { opacity: 0.5; } :-moz-placeholder { /* Firefox 4 - 18 */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; } :focus:-moz-placeholder { opacity: 0.5; }

In the example above we"ve thrown in a few basic styles on the input itself, and added a transition on the opacity to make the experience just a little nicer. Check out the demo and experiment with other CSS properties and transitions.

Где находится плейсхолдер?

Проблема в том, что подсказка поля ввода надежно спрятана в теневом DOM, и добраться до нее не так-то просто. Для этого используется особый нестандартный ::placeholder. С его помощью можно управлять свойствами подсказки.

Стилизация placeholder на CSS выглядит так:

Input::placeholder { color: red; opacity: 1; font-style: italic; }

Поддержка браузерами

::-webkit-input-placeholder - для webkit-браузеров (Safari, Chrome, Opera);
::-moz-placeholder - для браузеров Firefox выше 19 версии;
:-moz-placeholder - для старых Firefox;
:-ms-input-placeholder - для Internet Explorer выше 10 версии.

Возможности стилизации

Для псевдоэлемента 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; }

Input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }

Атрибут 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>Не каждое <a href="/games-for-android/cvet-shrifta-zadaetsya-atributom-tega-font-family-font-size-color-i-drugie-svoistva-css/">CSS свойство</a> можно использовать с плэйсхолдерами. Вот <a href="/updates-and-firmware/udalit-nepravilno-ustanovlennuyu-programmu-kak-udalit-programmu-s/">полный список</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>Чем больше ширина поля ввода, тем больше должно быть значение свойства 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 ; } <script type="text/javascript">  </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 id="post-ratings-1455-loading" class="post-ratings-loading"> <img src="https://realbazar.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" / loading=lazy> Загрузка...</div> </main> </section> <div id="right-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary" class="widget-area grid-25 tablet-grid-25 grid-parent sidebar"> <div class="inside-right-sidebar"> <aside id="wpp-3" class="widget inner-padding popular-posts"> <h4 class="widget-title">Популярное</h4> <ul class="wpp-list wpp-list-with-thumbnails"> <li> <a href="/news/iz-kakih-otelei-v-gorise-otkryvayutsya-krasivye-vidy-chudesa-armyanskoi-prirody/" title="Чудеса армянской природы: каменный «лес» и пещеры Гориса Горис – армянская Каппадокия" target="_self"><img src="/uploads/b8bb4c414c356eb260ca7873493bcbdb.jpg" width="195" height="98" alt="Чудеса армянской природы: каменный «лес» и пещеры Гориса Горис – армянская Каппадокия" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/news/iz-kakih-otelei-v-gorise-otkryvayutsya-krasivye-vidy-chudesa-armyanskoi-prirody/" title="Чудеса армянской природы: каменный «лес» и пещеры Гориса Горис – армянская Каппадокия" class="wpp-post-title" target="_self">Чудеса армянской природы: каменный «лес» и пещеры Гориса Горис – армянская Каппадокия</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> <li> <a href="/series-galaxy-note/smartfon-nubiya-z11-obzor-smartfona-zte-nubia-z11-mini-kitaicy-znayut-tolk-v-stile/" title="Обзор смартфона ZTE Nubia Z11 mini: китайцы знают толк в стиле" target="_self"><img src="/uploads/5be5f9606ee186039271d8a07ae49122.jpg" width="195" height="98" alt="Обзор смартфона ZTE Nubia Z11 mini: китайцы знают толк в стиле" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/series-galaxy-note/smartfon-nubiya-z11-obzor-smartfona-zte-nubia-z11-mini-kitaicy-znayut-tolk-v-stile/" title="Обзор смартфона ZTE Nubia Z11 mini: китайцы знают толк в стиле" class="wpp-post-title" target="_self">Обзор смартфона ZTE Nubia Z11 mini: китайцы знают толк в стиле</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> <li> <a href="/news/konvertirovat-iz-jpg-v-dwg-autocad-sohranyaem-chertezh-v-jpeg-chem-otkryt/" title="AutoCAD: Сохраняем чертеж в JPEG" target="_self"><img src="/uploads/4424462de4c669c97b32c1cbab2add1f.jpg" width="195" height="98" alt="AutoCAD: Сохраняем чертеж в JPEG" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/news/konvertirovat-iz-jpg-v-dwg-autocad-sohranyaem-chertezh-v-jpeg-chem-otkryt/" title="AutoCAD: Сохраняем чертеж в JPEG" class="wpp-post-title" target="_self">AutoCAD: Сохраняем чертеж в JPEG</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> <li> <a href="/series-galaxy-note/proshivka-android-s-pomoshchyu-utility-fastboot-proshivka-telefona-cherez/" title="Прошивка телефона через компьютер" target="_self"><img src="/uploads/f5bc96d55da5590d388ccc7e7ea0df7f.jpg" width="195" height="98" alt="Прошивка телефона через компьютер" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/series-galaxy-note/proshivka-android-s-pomoshchyu-utility-fastboot-proshivka-telefona-cherez/" title="Прошивка телефона через компьютер" class="wpp-post-title" target="_self">Прошивка телефона через компьютер</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> <li> <a href="/games-for-android/poluchenie-rut-prav-cherez-baidu-root-baidu-root-russkaya-versiya-skachat/" title="Baidu Root (русская версия) Скачать программу baidu root 2" target="_self"><img src="/uploads/5a849b03794509c087bd9d1ad2f7e068.jpg" width="195" height="98" alt="Baidu Root (русская версия) Скачать программу baidu root 2" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/games-for-android/poluchenie-rut-prav-cherez-baidu-root-baidu-root-russkaya-versiya-skachat/" title="Baidu Root (русская версия) Скачать программу baidu root 2" class="wpp-post-title" target="_self">Baidu Root (русская версия) Скачать программу baidu root 2</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> </ul> </aside> <style>.rpwe-block ul{ list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .rpwe-block li{ border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; list-style-type: none; } .rpwe-block a{ display: inline !important; text-decoration: none; } .rpwe-block h3{ background: none !important; clear: none; margin-bottom: 0 !important; margin-top: 0 !important; font-weight: 400; font-size: 16px !important; line-height: 1.5em; } .rpwe-thumb{ border: 2px solid #eee !important; box-shadow: none !important; margin: 2px 10px 2px 0; padding: 3px !important; } .rpwe-summary{ font-size: 14px; } .rpwe-time{ color: #bbb; font-size: 11px; } .rpwe-comment{ color: #bbb; font-size: 11px; padding-left: 5px; } .rpwe-alignleft{ display: inline; float: left; } .rpwe-alignright{ display: inline; float: right; } .rpwe-aligncenter{ display: block; margin-left: auto; margin-right: auto; } .rpwe-clearfix:before, .rpwe-clearfix:after{ content: ""; display: table !important; } .rpwe-clearfix:after{ clear: both; } .rpwe-clearfix{ zoom: 1; } </style><aside id="rpwe_widget-2" class="widget inner-padding rpwe_widget recent-posts-extended"><h4 class="widget-title">Свежие записи</h4><div class="rpwe-block "><ul class="rpwe-ul"> <li> <a href="/games-for-android/kak-uznat-skrytyi-nomer-telefona-kak-zablokirovat-zvonki/" title="Как заблокировать звонки с неизвестных номеров Вместо исходящего номера пишет неизвестный" target="_self"><img src="/uploads/59160f3def83e46a4d2d4f3430165e3f.jpg" width="195" height="98" alt="Как заблокировать звонки с неизвестных номеров Вместо исходящего номера пишет неизвестный" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/games-for-android/kak-uznat-skrytyi-nomer-telefona-kak-zablokirovat-zvonki/" title="Как заблокировать звонки с неизвестных номеров Вместо исходящего номера пишет неизвестный" class="wpp-post-title" target="_self">Как заблокировать звонки с неизвестных номеров Вместо исходящего номера пишет неизвестный</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> <li> <a href="/the-galaxy-s-series/mobilnyi-internet-v-gonkonge-sim-karty-v-gonkonge-gonkong-eto/" title="Мобильный интернет в гонконге" target="_self"><img src="/uploads/48856af8cf810a890c32a1c54a2a01ad.jpg" width="195" height="98" alt="Мобильный интернет в гонконге" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/the-galaxy-s-series/mobilnyi-internet-v-gonkonge-sim-karty-v-gonkonge-gonkong-eto/" title="Мобильный интернет в гонконге" class="wpp-post-title" target="_self">Мобильный интернет в гонконге</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> <li> <a href="/samsung-galaxy-s6-edge/razdaem-vai-fai-noutbuka-windows-8-kak-organizovat-razdachu-wifi-na-noutbuke-v/" title="Как организовать раздачу WiFi на ноутбуке в командной строке: Видео" target="_self"><img src="/uploads/12090b4dbf4170763daa4d6389fb87cf.jpg" width="195" height="98" alt="Как организовать раздачу WiFi на ноутбуке в командной строке: Видео" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/samsung-galaxy-s6-edge/razdaem-vai-fai-noutbuka-windows-8-kak-organizovat-razdachu-wifi-na-noutbuke-v/" title="Как организовать раздачу WiFi на ноутбуке в командной строке: Видео" class="wpp-post-title" target="_self">Как организовать раздачу WiFi на ноутбуке в командной строке: Видео</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> <li> <a href="/the-galaxy-s-series/kak-podklyuchit-audio-k-materinskoi-plate-podklyuchaem-elementy-sistemy-k/" title="Подключаем элементы системы к материнской плате" target="_self"><img src="/uploads/da586bda1357936037152fd2d029a7cb.jpg" width="195" height="98" alt="Подключаем элементы системы к материнской плате" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/the-galaxy-s-series/kak-podklyuchit-audio-k-materinskoi-plate-podklyuchaem-elementy-sistemy-k/" title="Подключаем элементы системы к материнской плате" class="wpp-post-title" target="_self">Подключаем элементы системы к материнской плате</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> <li> <a href="/comparison/chto-delat-esli-ne-vklyuchaetsya-telefon-kak-ozhivit-smartfon/" title="Как оживить смартфон, не отвечающий на прикосновения Смартфон плохо реагирует на прикосновения что делать" target="_self"><img src="/uploads/98fd5b9f2fb718df02d2e0d88956eca7.jpg" width="195" height="98" alt="Как оживить смартфон, не отвечающий на прикосновения Смартфон плохо реагирует на прикосновения что делать" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy></a> <a href="/comparison/chto-delat-esli-ne-vklyuchaetsya-telefon-kak-ozhivit-smartfon/" title="Как оживить смартфон, не отвечающий на прикосновения Смартфон плохо реагирует на прикосновения что делать" class="wpp-post-title" target="_self">Как оживить смартфон, не отвечающий на прикосновения Смартфон плохо реагирует на прикосновения что делать</a> <span class="wpp-excerpt">Человеку, который имеет свой плей л...</span> <br><br> </li> </ul></div></aside><aside id="custom_html-2" class="widget_text widget inner-padding widget_custom_html"> <div class="textwidget custom-html-widget"> </div> </aside> </div> </div> </div> </div> <div class="site-footer grid-container grid-parent "> <div id="footer-widgets" class="site footer-widgets"> <div class="footer-widgets-container grid-container grid-parent"> <div class="inside-footer-widgets"> <div class="footer-widget-1 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="categories-3" class="widget inner-padding widget_categories"> <h4 class="widget-title">Рубрики</h4> <ul> <li class="cat-item cat-item-99"><a href="/category/samsung-galaxy-s3/" title="Samsung Galaxy S3">Samsung Galaxy S3</a> </li> <li class="cat-item cat-item-99"><a href="/category/samsung-galaxy-s5/" title="Samsung Galaxy S5">Samsung Galaxy S5</a> </li> <li class="cat-item cat-item-99"><a href="/category/games-for-android/" title="Игры на Андроид">Игры на Андроид</a> </li> <li class="cat-item cat-item-99"><a href="/category/news/" title="Новости">Новости</a> </li> <li class="cat-item cat-item-99"><a href="/category/an-overview-of-the-devices/" title="Обзор устройств">Обзор устройств</a> </li> <li class="cat-item cat-item-99"><a href="/category/different/" title="Разные">Разные</a> </li> </ul> </aside> </div> <div class="footer-widget-2 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="text-9" class="widget inner-padding widget_text"> </aside> </div> <div class="footer-widget-3 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="pages-2" class="widget inner-padding widget_pages"> <h4 class="widget-title">Страницы</h4> <ul> <li class="page_item page-item-422"><a href="/sitemap.xml">Карта сайта</a></li> <li class="page_item page-item-917"><a href="/feedback/">Обратная связь</a></li> </ul> </aside> <aside id="text-11" class="widget inner-padding widget_text"> <h4 class="widget-title">© 2024 realbazar.ru</h4> </aside> </div> </div> </div> </div> <footer class="site-info" itemtype="http://schema.org/WPFooter" itemscope="itemscope"> <div class="inside-site-info grid-container grid-parent"> <div class="copyright-bar"> <span class="copyright">© 2024</span> • </div> </div> </footer> </div> <a id="scroll-to-top" href="#" title="Scroll to Top">Top</a> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.6'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll": "1" }; /* ]]> */ </script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/dropdown.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation-search.min.js?ver=1.4'></script>  <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "sidebar-1", "margin_top": 10, "margin_bottom": 0, "stop_id": "footer-widgets", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['custom_html-2'] }; </script> <script type='text/javascript' src='https://realbazar.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.8.6'></script> </body> </html>