Css изменить цвет placeholder. Внешний вид названия полей или как изменить placeholder

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения.

Плохо

Хорошо

Стилизация: изменить цвет placeholder CSS

Поменять стиль поля ввода с placeholder CSS

Плохо

Эффект placeholder для

Атрибут placeholder работает только для и , даже если у других тегов указан атрибут contenteditable . </p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="Можно ввести текст" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="Можно ввести текст" class="raz"></div> <h2>Древний метод на память, изменяющий value JavaScript</h2> <input onblur="this.value=(this.value==" onfocus="this.value=(this.value==this.title)?" value="Email" title="Email"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="Email" title="Email" /> <p>Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги <input> и <textarea>). В этой статье я рассмотрю способы стилизации плэйсхолдеров, а также, как сделать их более удобными в использовании.</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="/v-kakoi-papke-faily-css-struktura-papok-i-elementov-podklyuchenie.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>Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот <a href="/polnyi-spisok-stop-slov-dlya-instagram-nastroiki-massfollovinga-dlya.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>Чем больше ширина поля ввода, тем больше должно быть значение свойства 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>Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный <a href="/chto-takoe-css-osnovnye-ponyatiya-chto-takoe-css-i-gde-ego.html">CSS файл</a> превратился в кашу из префиксов для всех <a href="/ustanovit-skript-dlya-igry-tyuryaga-v-kontakte-ustanovka.html">возможных браузеров</a>, то обратите внимание на 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 и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.</p> <p>Итак, начнем с примера для тех, кто не знает, что такое placeholder.</p> <h4>html</h4> <input type="text" placeholder="Оставьте сообщение здесь"> <p>Стиль placeholder-a можно изменить с помощью такого набора css правил:</p> <h4>css</h4> ::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;} <p>Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.</p> <p>В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в <a href="/firefox-new-version-download-download-and-install-the-mozilla-firefox-browser-russian-version-on-your-computer.html">новых firefox</a>, webkit и blink – псевдоэлементом.</p> <p>Смотрим, что получилось:</p> <p>Нужно сказать, что поддерживаются не все возможные <a href="/svoistvo-css-opacity-upravlenie-prozrachnostyu-svoistvo-css-opacity-upravlenie.html">css свойства</a>. Большинство современных браузеров позволяют изменить:</p> <ul><li>font (и сопутствующие свойства)</li> <li>background (и сопутствующие свойства)</li> <li>color</li> <li>word-spacing</li> <li>letter-spacing</li> <li>text-decoration</li> <li>vertical-align</li> <li>text-transform</li> <li>line-height</li> <li>text-indent</li> <li>text-overflow</li> <li>opacity</li> </ul><h2>А если placeholder не вмещается?</h2> <p>Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis . Такой синтаксис будет работать во всех новых браузерах.</p> <h4>css</h4> input {text-overflow:ellipsis;} input::-moz-placeholder {text-overflow:ellipsis;} input:-moz-placeholder {text-overflow:ellipsis;} input:-ms-input-placeholder {text-overflow:ellipsis;} <h2>Как скрыть placeholder при фокусе?</h2> <p>Скрывание placeholder-а происходит по-разному.</p> <ol><li>в некоторых браузерах при получении фокуса инпутом</li> <li>в других браузерах при наличии хотя бы одного введенного символа</li> </ol><p>Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:</p> <h4>css</h4> :focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent} <h2>Скрываем placeholder красиво</h2> <p>Можно также добавить transition для появления и скрытия placeholder-a:</p> <h4>css</h4> /* плавное изменение прозрачности placeholder-а при фокусе */ .input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} /* сдвиг placeholder-а вправо при фокусе*/ .input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} /* сдвиг placeholder-а вниз при фокусе*/ .input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} <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://i0.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy></p> <h2>Поддержка браузерами</h2> <p>Псевдоэлемент CSS placeholder хорошо обрабатывается всеми <a href="/metod-postepennogo-uluchsheniya-s-css3-podderzhka-sovremennyh-brauzerov.html">современными браузерами</a>, а для поддержки старых обозревателей можно воспользоваться префиксами:</p> <ul><li>::-webkit-input-placeholder - для webkit-браузеров (Safari, Chrome, Opera);</li> <li>::-moz-placeholder - для <a href="/how-to-find-out-the-version-of-the-mozilla-on-the-computer-which-version-of-firefox-is-better.html">браузеров Firefox</a> выше 19 версии;</li> <li>:-moz-placeholder - для <a href="/speed-dial-dlya-firefox-s-polnoi-onlain-sinhronizaciei-speed-dial-dlya-mozilla.html">старых Firefox</a>;</li> <li>:-ms-input-placeholder - для <a href="/what-is-an-external-browser-nonstandard-and-unusual-for-the-average-user-compared-to-the-internet-explorer-the-interface.html">Internet Explorer</a> выше 10 версии.</li> </ul><p>Как видно, старые <a href="/improving-the-performance-of-the-browser-firefox-optimize-the-mozilla-firefox-browser-for-quick-work.html">браузеры Mozilla</a>, а также 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>В <a href="/skachat-brauzer-google-novaya-versiya-gde-skachat-i-kak-ustanovit.html">браузере Google</a> Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.</p> <p>Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом CSS placeholder.</p> <h2>Где находится плейсхолдер?</h2> <p>Проблема в том, что подсказка поля ввода надежно спрятана в теневом DOM, и добраться до нее не так-то просто. Для этого используется особый нестандартный псевдоэлемент CSS::placeholder. С его помощью можно управлять свойствами подсказки.</p> <p>You will be interested: </p> <p><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy></p><p>Стилизация placeholder на CSS выглядит так:</p> <p>input::placeholder { color: red; opacity: 1; font-style: italic; } <br><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/050be174ed3b60dc7c49fe3cd59e15ba.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://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy></p><h2>Возможности стилизации</h2> <p>Для псевдоэлемента placeholder в CSS можно установить следующие параметры:</p> <ul><li>фон - группа background-свойств. Фон блока подсказки распространяется на все поле ввода. Можно задать не только цвет (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><p>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; } </p><h2>В фокусе</h2> <p>По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но псевдоэлемент CSS 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>В браузере <a href="/can-not-install-chrome-google-chrome-is-not-installed.html">Google Chrome</a> цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.</p> <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 class="dsperelink"> <div class="read-analog"> <style> </style> <style> #perelink-horizontal { vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 192px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img { width: 192px; height: 192px; margin-bottom: 10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="/kak-zablokirovat-cheloveka-v-vk-cherez-soobshchenie-kak-zablokirovat.html"> <img src="/uploads/8551c7ee53ff25f64d695087157fa6ec.jpg" height="192" width="192" loading=lazy> <span>Как заблокировать страницу вк</span> </a> </div> <div class="perelink-horizontal-item"> <a href="/neukosnitelnyi-add-message-php-php-ajax-crud-sozdanie-udalenie-redaktirovanie-zapisei-v-bd.html"> <img src="/uploads/5ce8ac058f1c3d4324c49075fc2202d0.jpg" height="192" width="192" loading=lazy> <span>PHP AJAX CRUD: создание, удаление, редактирование записей в БД MySQL</span> </a> </div> <div class="perelink-horizontal-item"> <a href="/flai-vista-451-mobilnyi-telefon-fly-iq451-quattro-zvuk-fly-iq451-quattro-vista.html"> <img src="/uploads/2206d3ecf27b0ff2468c96b20b9d19a0.jpg" height="192" width="192" loading=lazy> <span>Мобильный телефон Fly IQ451 Quattro</span> </a> </div> <div class="perelink-horizontal-item"> <a href="/vosstanovlenie-windows-10-posle-sletel-windows---chto-delat-vklyuchenie-vosstanovleniya.html"> <img src="/uploads/006f771be15d5430864318de8e326d31.jpg" height="192" width="192" loading=lazy> <span>Слетел Windows - что делать?</span> </a> </div> </div> </div> </div> </div> </article> </div> </section> <aside class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="mainnavbar side-box clear"> <div id="nav_menu-2" class="side-box_b"> <div class="menu-sidenav-container"> <ul id="menu-sidenav" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/total/">Общее</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/hard-drive/">Жесткий диск</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/different/">Разное</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/windows/">Windows</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/apple/">Apple</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/android/">Android</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/browsers/">Браузеры</a> </li> </ul> </div> </div> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">ТОП 5:</span> <ul class="textw_a clear"> <li><a href="/dni-rozhdeniya-na-iphone-ipad-i-mac-kak-dobavlyat-i-vklyuchat.html">Лучшее приложение для напоминаний на iPhone и iPad Как сделать напоминание об умершем в айфоне</a></li> <li><a href="/biometricheskaya-skud-castle-biometricheskie-skud-kontrol-dostupa-v-pomeshchenie.html">Биометрические скуд Контроль доступа в помещение по отпечатку пальца</a></li> <li><a href="/smartfon-sony-xperia-m2-aqua-obzor-harakteristiki-otzyvy-sony-xperia-m2.html">Sony Xperia M2 Aqua: характеристики и отзывы Иксперия m2 aqua</a></li> <li><a href="/chasy-dlya-windows-phone-smart-chasy-dlya-windows-phone-fitnes-chasy-fitbit-blaze.html">Смарт часы для Windows Phone</a></li> <li><a href="/perevod-deneg-s-balansa-mts-abonentu-tele2-perevod-deneg-s-telefona.html">Перевод денег с телефона Теле2 на телефон МТС без комиссии Пополнение счета с теле2 на мтс</a></li> </ul> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">Последние материалы:</span> <ul> <li> <a href="/kveik-5-sistemnye-trebovaniya-quake-champions-sistemnye-trebovaniya-na-pk-minimalnye.html" >Quake Champions системные требования на ПК</a> </li> <li> <a href="/zabyl-parol-na-8-vinde-kak-ubrat-programmy-sbrosa-parolya.html" >Программы сброса пароля windows</a> </li> <li> <a href="/chto-takoe-planshetnyi-pk-chto-takoe-planshetnyi-kompyuter-kak.html" >Что такое планшетный компьютер</a> </li> <li> <a href="/galaxy-s7-edge-luchshii-i-samyi-dorogoi-smartfon-samsung-oficialnye-harakteristiki-samsung.html" >Официальные характеристики Samsung Galaxy S7 Samsung galaxy s7 edge размеры</a> </li> <li> <a href="/proverka-diska-na-sboinye-sektora-kak-proverit-zhestkii-disk-na-bitye.html" >Как проверить жесткий диск на битые секторы (бэды)</a> </li> </ul> </div> <div class="side-box clear"> <div id="rexuta2" style="height:800px;width:240px;" align="center"></div> </div> </aside> </section> <div class="footer"> <div id="footer_mainnav" class="mainnav collapse navbar-collapse col-xs-12 col-sm-12"> <ul id="menu-mainnav-1" class="nav navbar-nav navi"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/flash-drives/">Флеш-накопители</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/total/">Общее</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/hard-drive/">Жесткий диск</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/different/">Разное</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/windows/">Windows</a></li> </ul> </div> <div class="twobl-footer col-xs-12 col-sm-12"> <div class="onef col-xs-12 col-sm-3"> <div class="fool2og log-m_h1"> <img src='/public/logo.png' loading=lazy> </div> <div class="decksite"></div> </div> <div class="twof col-xs-12 col-sm-2"> <ul id="menu-foonav" class="twonavig"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="/category/apple/">Apple</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="/category/browsers/">Браузеры</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="/category/flash-drives/">Флеш-накопители</a></li> </ul> </div> <div class="treef col-xs-12 col-sm-4"> <ul class="f-post"> <li><a href="/kak-ustanovit-novye-shrifty-v-windows-7-sposoby-ustanovki.html">Способы установки шрифтов в Windows</a></li> <li><a href="/vkontakte-moya-stranica-vhod-na-stranicu-vk-registraciya-i-vhod-na-svoyu.html">Регистрация и вход на свою страницу в Контакте — что делать если войти в ВК не получается</a></li> <li><a href="/sp-flash-tool-versiya-5-1724-sp-flash-tool-proshivka-android-ustroistv-na-baze-processorov-mediatek.html">Sp flash tool версия 5.1724. SP Flash Tool: прошивка Android-устройств на базе процессоров Mediatek</a></li> <li><a href="/megafon-tarif-vse-vklyucheno-s-opisanie-i-ceny-na-internet-megafon-tarif-vs.html">Мегафон тариф "Всё включено S"</a></li> </ul> </div> <div class="fourf col-xs-12 col-sm-3"> <div class="buth"> <a class="butt-faq buttorang" href="/feedback.html" title="контакты">Контакты</a> </div> <p class="continfo">Компьютерная помощь Олимп </div> </div> <div class="tree-footer col-xs-12 col-sm-12 clear"> © 2024. olympsb.ru. Компьютерная помощь Олимп. </div> </div> <script src="https://olympsb.ru/wp-content/themes/vsepropechen/js/bootstrap.min.js"></script> <script type='text/javascript' src='https://olympsb.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://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/wp-postratings/postratings-js.js?ver=1.83'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.7.6'></script> <div style="display:none"> <div id="text-3" class="conter-metr"> <div class="textwidget"> </script> </div> </div> </div> <div id="top-link"> <a href="#top"></a> </div> </body> </html> </div>