Design placeholder css. How to change the color of the tooltip text in a placeholder using CSS styles? Task: make your own CSS style for placeholder

Typically the placeholder attribute on input and textarea is used to provide a call to action within those elements. In this note I will describe several options for styling the text of placeholders, as well as options for their animation

So, the text color of our placeholder can be changed using, for example, the following set of CSS rules:

::-webkit-input-placeholder ( color : #c0392b ;) ::-moz-placeholder ( color : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( color : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( color : #c0392b ;)

The length of code for styling such a simple property is due to the lack of a common standard, and therefore each browser has implemented support for placeholder styling in its own way.

Also, not all are supported css properties. Here is a list of exactly supported properties:

font (and related)
background (and related)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

It also happens that the placeholder text “extends” the width of the input or textarea element (a common case for mobile devices). At the same time, it is automatically cut off unsightly.

A CSS property like text-overflow: ellipsis will help us fix this problem, which will add an aesthetic ellipsis to the cropped area of the placeholder. In styles we write like this:

input [ placeholder ] ( text-overflow : ellipsis ;) input ::-moz-placeholder ( text-overflow : ellipsis ;) input :-moz-placeholder ( text-overflow : ellipsis ;) input :-ms-input-placeholder ( text-overflow : ellipsis ;)

To add even more aesthetics to our placeholders, it is possible to add the effect of hiding it when the corresponding element receives focus.

Some examples of such hiding with animation elements:

/* smooth change in placeholder transparency when focused */.input ::-webkit-input-placeholder ( opacity : 1 ; transition : opacity 0.3s ease ;) .input ::-moz-placeholder ( opacity : 1 ; transition : opacity 0.3s ease ;).input :-moz- placeholder (opacity: 1; transition: opacity 0.3s ease;).input:-ms-input-placeholder (opacity: 1; transition: opacity 0.3s ease;).input (opacity: 0; transition: opacity 0.3s ease; ) .input :focus::-moz-placeholder ( opacity : 0 ; transition : opacity 0.3s ease ;).input :focus:-moz-placeholder ( opacity : 0 ; transition : opacity 0.3s ease ;).input :focus :-ms-input-placeholder ( opacity : 0 ; transition : opacity 0.3s ease ;) /* shift the placeholder to the right when focused */.input ::-webkit-input-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;) .input ::-moz-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;).input :-moz-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;).input :-ms-input-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;).input :focus::-webkit-input-placeholder( text-indent : 500px ; transition : text-indent 0.3s ease ;).input :focus::-moz-placeholder ( text-indent : 500px ; transition : text-indent 0.3s ease ;).input :focus:- moz-placeholder ( text-indent : 500px ; transition : text-indent 0.3s ease ;) .input :focus:-ms-input-placeholder ( text-indent : 500px ; transition : text-indent 0.3s ease ;) /* shift the placeholder down when focused */.input ::-webkit-input-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;) .input ::-moz-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;).input :-moz-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;).input :-ms-input-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;).input :focus::-webkit-input-placeholder( line-height : 100px ; transition : line-height 0.5s ease ;).input :focus::-moz-placeholder ( line-height : 100px ; transition : line-height 0.5s ease ;).input :focus:- moz-placeholder ( line-height : 100px ; transition : line-height 0.5s ease ;).input :focus:-ms-input-placeholder ( line-height : 100px ; transition : line-height 0.5s ease ;)

Let's finish here.

If you are not familiar with the placeholder attribute, then let's explain a little what it is and where it is used. It is used in form input fields. The attribute displays a text in the input field, representing the role of a certain hint. Earlier on our website there was an example, with using javascript, positive side this method It's cross-browser compatible. Now let's talk about styling the placeholder attribute, which is used on input and textarea elements.
The input field code in our example will look something like this:

At the output we get the following field:

Now let's imagine that we need to style the placeholder, for this we need to write a set of rules in CSS:

::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( color: #c1c1c1; )

We get:

We cannot change all properties, but a list of most of them supported by modern browsers is given below:
font(also related properties)
background(also related properties)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

IN different browsers the rule is written differently, because While there is no single standard, this set of records continues to be relevant. In the IE browser, as well as firefox below version 18, placeholder is perceived as a pseudo-class, and in new browsers firefox, webkit and blink it is perceived as a pseudo-element.

Shortening text in placeholder
Sometimes tooltips can be so long that they cannot completely fit into the input field. For these purposes, you can also use additional properties that will allow you to shorten the placeholder text in the input field.

Input ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :ellipsis; )

As a result, we get an input field with a placeholder like this:

Hide text when clicking on a field
By default, each browser interprets placeholder's response differently. In some browsers it is hidden immediately when you click on the field, in others it is hidden when there is at least one character in the input field. Let's make the text disappear when you click on the field, the same in all browsers.

:focus::-webkit-input-placeholder ( color: transparent; ) :focus::-moz-placeholder ( color: transparent; ) :focus:-moz-placeholder ( color: transparent; ) :focus:-ms-input -placeholder ( color: transparent; )

We get this action:

In an effort to reduce shape and reduce visual noise, designers tag are replaced with the placeholder attribute, thereby increasing the load on short-term memory. People with visual impairments may find the clue difficult to read. It's better to place directly above the input field. An empty field is more easily recognized as an element that requires filling.

Badly

Fine

Styling: change placeholder color CSS

Change input field style with placeholder CSS

Badly

Placeholder effect for

The placeholder attribute only works for And , even if other tags have the contenteditable attribute specified.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="You can enter text" 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="You can enter text" class="raz"></div> <h2>An ancient memory method that changes the value of 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 is an element of an input field in which a tooltip can be placed. When the user begins to enter data, the supporting text disappears so as not to interfere. Each browser has its own opinion on how this element should be displayed, and sometimes default styles break the entire design. To control them, you need to use a special <a href="https://128gb.ru/en/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html.html">CSS rule</a> placeholder</p> <h2>Where is the placeholder?</h2> <p>The problem is that the input field's tooltip is firmly hidden in the shadow DOM and is not that easy to get to. For this, a special non-standard ::placeholder is used. With its help you can manage the properties of the tooltip.</p> <p>Styling a placeholder in CSS looks like this:</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 loading=lazy></p> <h2>Browser support</h2> <p>The CSS placeholder pseudo-element is handled well by all modern browsers, and to support older browsers you can use the following prefixes:</p> <ul><li>::-webkit-input-placeholder - for webkit browsers (Safari, Chrome, Opera);</li> <li>::-moz-placeholder - for <a href="https://128gb.ru/en/download-software-mozilla-firefox-download-and-install-the-mozilla-firefox-browser-russian-version-on-your-computer.html">Firefox browsers</a> above version 19;</li> <li>:-moz-placeholder - for older Firefox;</li> <li>:-ms-input-placeholder - for <a href="https://128gb.ru/en/chto-za-sluzhba-event-monitor-vosstanovlenie-internet-explorer-domashnyuyu-stranicu.html">Internet Explorer</a> above version 10.</li> </ul><p>As you can see, old <a href="https://128gb.ru/en/ustanovka-plagina-kriptopro-csp-v-brauzere-mozilla-firefox-kripto-pro-ecp.html">Mozilla browsers</a>, as well as IE, consider placeholder to be a CSS pseudo-class, not a pseudo-element. Let's not argue with them, we'll just take this aspect into account when styling the input field.</p> <p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Styling options</h2> <p>You can set the following options for the placeholder pseudo-element in CSS:</p> <ul><li>background - the tooltip block group applies to the entire input field. You can set not only the color (background-color), but also the image (background-image).</li> <li>text color - color;</li> <li>transparency - opacity;</li> <li>underlining, overlining or striking out - text-decoration;</li> <li>case - text-transform;</li> <li><a href="https://128gb.ru/en/vnutrennii-otstup-v-tablice-html-primenenie-svoistva-border.html">padding</a>- padding. Not supported by all browsers. As with inline elements, top and bottom padding is ignored.</li> <li>font display - properties of the font group, line-height and various indents (text-indent, letter-spacing, word-spacing);</li> <li>vertical alignment in a line - vertical-align;</li> <li>trimming text when the container overflows - 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>In focus</h2> <p>By default, the tooltip disappears from the input field only if at least one character is entered into it. But placeholder allows you to implement the disappearance immediately when focusing on the field. To do this, you need to combine it with the pseudo-class:focus.</p><p>Input:focus::placeholder ( color: transparent; )</p><p>In some browsers, it is possible to animate changes in a number of placeholder properties using the transition statement.</p><p>Input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )</p><p>In the browser <a href="https://128gb.ru/en/chto-oznachaet-verhnii-pravyi-ugol-stranicy-elementy-upravleniya-na-stranice.html">Google Chrome</a> When focusing on such a field, the color of the hint will smoothly change within one second.</p> <p>Placeholder is an element of an input field in which a tooltip can be placed. When the user begins to enter data, the supporting text disappears so as not to interfere. Each browser has its own opinion on how this element should be displayed, and sometimes default styles break the entire design. To manage them, you need to use a special CSS placeholder rule.</p> <h2>Where is the placeholder?</h2> <p>The problem is that the input field's tooltip is firmly hidden in the shadow DOM and is not that easy to get to. To do this, a special non-standard CSS::placeholder pseudo-element is used. With its help you can manage the properties of the tooltip.</p> <p>You will be interested:</p> <p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy loading=lazy></p><p>Styling a placeholder in CSS looks like this:</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 loading=lazy></p><h2>Browser support</h2> <p>The CSS placeholder pseudo-element is handled well by all modern browsers, and to support older browsers you can use the following prefixes:</p> <ul><li>::-webkit-input-placeholder - for webkit browsers (Safari, Chrome, Opera);</li> <li>::-moz-placeholder - for Firefox browsers above version 19;</li> <li>:-moz-placeholder - for older Firefox;</li> <li>:-ms-input-placeholder - for Internet Explorer above version 10.</li> </ul><p>As you can see, older Mozilla browsers, as well as IE, consider placeholder to be a CSS pseudo-class and not a pseudo-element. Let's not argue with them, we'll just take this aspect into account when styling the input field.</p> <p><img src='https://i1.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy loading=lazy></p><h2>Styling options</h2> <p>You can set the following options for the placeholder pseudo-element in CSS:</p> <ul><li>background - group of background properties. The hint block background applies to the entire input field. You can set not only the color (background-color), but also the image (background-image).</li> <li>text color - color;</li> <li>transparency - opacity;</li> <li>underlining, overlining or striking out - text-decoration;</li> <li>case - text-transform;</li> <li>internal indents - padding. Not supported by all browsers. As with inline elements, top and bottom padding is ignored.</li> <li>font display - properties of the font group, line-height and various indents (text-indent, letter-spacing, word-spacing);</li> <li>vertical alignment in a line - vertical-align;</li> <li>trimming text when the container overflows - 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>In focus</h2> <p>By default, the tooltip disappears from the input field only if at least one character is entered into it. But the CSS placeholder pseudo-element allows you to implement fading immediately when focusing on the field. To do this, you need to combine it with the pseudo-class:focus.</p> <p>input:focus::placeholder ( color: transparent; )</p><p>In some browsers, it is possible to animate changes in a number of placeholder properties using the transition statement.</p> <p>input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )</p><p>IN <a href="https://128gb.ru/en/ustanovochnyi-fail-google-chrome-windows-xp-besplatnaya-ustanovka.html">Google browser</a> Chrome tooltip color when focusing on such a field will smoothly change within one second.</p>  <script async="async" src="https://cdn-rtb.sape.ru/teasers/js/291/2/92291.js" 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 loading=lazy>");</script> </article> <div class="single-share"> <div class="row align-middle"> <div class="columns small-12 medium-expand"> <div class="single-share__title">tell friends</div> </div> </div> <div class="single-share-links"> <div class="row"> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--fb"> <div class="row"> <div class="columns"><i class="fa fa-facebook-official single-share-links-item__icon"></i> </div> <div class="columns text-right js-fb-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--vk"> <div class="row"> <div class="columns"><i class="fa fa-vk single-share-links-item__icon"></i> </div> <div class="columns text-right js-vk-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--tw"> <div class="row"> <div class="columns"><i class="fa fa-twitter single-share-links-item__icon"></i> </div> <div id="twitter_sharer" class="columns text-right">Twitter <span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html/&utm_source=share2', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--ok"> <div class="row"> <div class="columns"><i class="fa fa-odnoklassniki single-share-links-item__icon"></i> </div> <div class="columns text-right js-ok-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> </div> </div> </div> <div class="banner-place" data-place="article_under_h1" style="width: 100%;"></div> <div class="prev-next-articles"> <div class="prev-next-articles__item prev-next-articles__item--left"> <i class="fa fa-chevron-left"></i><span>"Why do you need...</span> <a href="https://128gb.ru/en/vstroennyi-graficheskii-processor-vstroennye-graficheskie-processory.html" rel="prev">Integrated GPUs - All about plugging and unplugging Processor with powerful graphics core</a> </div> <div class="prev-next-articles__item prev-next-articles__item--right"> <i class="fa fa-chevron-right"></i><span>Next article</span> <a href="https://128gb.ru/en/opisanie-opcii-gigabyte-uefi-dualbios-na-russkom-tonkaya-nastroika-uefi.html" rel="next">Description of gigabyte uefi dualbios options in Russian</a> </div> </div> <div class="banner-place" data-place="article_above_similar_articles" style="width: 100%;"></div> <div class="banner-place" data-place="article_above_similar_articles_2" style="width: 100%;"></div> <div class="banner-place" data-place="article_under_social" style="width: 100%;"></div> <div class="banner-place" data-place="fixed_bottom_right" style="width: 100%;"></div> <div class="read-more"> <div class="read-more__title text-center">Read also</div> <div class="read-more__row"> <div class="row"> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/en/zashchita-failov-polzovatelei-s-pomoshchyu-istorii-failov-ispravlyaem-oshibki.html"> <img width="130" height="85" src="/uploads/a594a4802eca848ccb4fb73c24bd61ec.jpg" alt="We fix disk formatting errors. We disable what interferes with the “File History” function." / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/en/zashchita-failov-polzovatelei-s-pomoshchyu-istorii-failov-ispravlyaem-oshibki.html">We fix disk formatting errors. We disable what interferes with the “File History” function.</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2023-10-19 00:03:17</span> </div> </div> </div> </div> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/en/ustanovka-vin-8-1-okonchatelnaya-nastroika-i-ustanovka-prilozhenii.html"> <img width="130" height="85" src="/uploads/faa668f985f6dcacb25930d6c0e877aa.jpg" alt="Final setup and installation of applications" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/en/ustanovka-vin-8-1-okonchatelnaya-nastroika-i-ustanovka-prilozhenii.html">Final setup and installation of applications</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2023-10-19 00:03:17</span> </div> </div> </div> </div> </div> </div> <div class="read-more__row"> <div class="row"> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/en/propal-bloknot-v-windows-7-chto-delat-tekstovyi-redaktor-bloknot.html"> <img width="130" height="85" src="/uploads/57246b6e935faf4891238346b176aed4.jpg" alt="Text editor "Notepad"" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/en/propal-bloknot-v-windows-7-chto-delat-tekstovyi-redaktor-bloknot.html">Text editor "Notepad"</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2023-10-19 00:03:17</span> </div> </div> </div> </div> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/en/sekrety-yandeks-disk-kak-ustanovit-voiti-i-polzovatsya-kak-zagruzit.html"> <img width="130" height="85" src="/uploads/8b989058d02eadba216d01f132487eb8.jpg" alt="How to upload a file to Yandex - step-by-step instructions Local disk loaded to 100" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/en/sekrety-yandeks-disk-kak-ustanovit-voiti-i-polzovatsya-kak-zagruzit.html">How to upload a file to Yandex - step-by-step instructions Local disk loaded to 100</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2023-10-19 00:03:17</span> </div> </div> </div> </div> </div> </div> <div class="read-more__row"> <div class="row"> </div> </div> <div class="read-more__row"> <div class="row"> </div> </div> </div> </div> </div> <div class="columns small-12 medium-4 show-for-medium"> <aside class="sidebar"> <div class="experts-list"> <b><div class="experts-list__title">Latest publications</div></b><br> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/587e748da0ef135e3df2896384970047.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/rt-g32-ne-rabotaet-wifi-router-asus-versii-rt-g32-opisanie-modeli-ustanovka.html" title="Asus router version RT-G32: model description, installation, configuration" class="expert__name">Asus router version RT-G32: model description, installation, configuration</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/the-choice-of-operating-system/">Selecting an operating system</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/9f486193db3aa252e9d38fd37f2480ba.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/skiny-skiny-krutye-skiny-po-imenam.html" title="Skins Cool skins by name" class="expert__name">Skins Cool skins by name</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/boot-disk/">Boot disk</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/f398b1777dfb222505c9144d28bc9432.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/skachat-launcher-s-oruzhiem-i-mashinami-servera-mainkraft-s-modom-na-oruzhie.html" title="Minecraft servers with weapon mod" class="expert__name">Minecraft servers with weapon mod</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/installation-and-configuration/">Installation and configuration</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/2b2626dd74c8107286cf754ac86b7313.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/mod-flans-voennaya-tehnika-i-oruzhie-v-minecraft-mod-flans-voennaya.html" title="Mod Flans - military equipment and weapons in Minecraft Military equipment in minecraft 1" class="expert__name">Mod Flans - military equipment and weapons in Minecraft Military equipment in minecraft 1</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/the-choice-of-operating-system/">Selecting an operating system</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/165a1d2913e54f3f5ed3e43844212e14.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/mod-jj-skill-skilly-mmorpg-mod-jj-skill-skilly-mmorpg-prokachka-personazha-v.html" title="Mod jj skill (mmorpg skills) Leveling up your character in minecraft 1" class="expert__name">Mod jj skill (mmorpg skills) Leveling up your character in minecraft 1</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/installation-and-configuration/">Installation and configuration</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/459c107da6a92c93c4bf1d6b4fbf933e.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/speedfan-kak-sdelat-kulery-bystrei-kak-nastroit-skorost.html" title="How to adjust the rotation speed of coolers (fans)" class="expert__name">How to adjust the rotation speed of coolers (fans)</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/work-in-the-system/">Working in the system</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/ae162dd6b5cbc5cc009814de19923842.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/pochemu-nagrevaetsya-zaryadnoe-ustroistvo-pri-zaryadke-telefona-ili-plansheta.html" title="The phone gets very hot when locked or while charging, is this normal?" class="expert__name">The phone gets very hot when locked or while charging, is this normal?</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/iron/">Iron</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/a1c93fb69c5e1f753d2642442bc46e8d.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/budet-li-rabotat-ssd-bez-ahci-pereklyuchenie-interfeisa-sata-v-rezhim-ahci-na.html" title="Switching the SATA interface to AHCI mode on an existing OS" class="expert__name">Switching the SATA interface to AHCI mode on an existing OS</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/peripherals/">Periphery</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/355908a42b70e66f06347f7e4ca1de5a.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/kak-nabrat-podpischikov-na-yutube-estestvennymi-sposobami-kak.html" title="How to gain subscribers on YouTube: I share paid and free methods How famous YouTube bloggers gained subscribers" class="expert__name">How to gain subscribers on YouTube: I share paid and free methods How famous YouTube bloggers gained subscribers</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/protection/">Protection</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/3156cce9d3f24151733f585da61c9ec5.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/en/vsp-group-partnerka-oficialnyi-partnerka-yutub-yoola-vsp-group-podklyuchenie-k-partnerke.html" title="YouTube affiliate Yoola VSP Group" class="expert__name">YouTube affiliate Yoola VSP Group</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/en/category/boot-disk/">Boot disk</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> </div> <div> <div id="komojy1" style="height:500px;width:300px;" align="center"></div> </div> </aside> </div> </div> </main> </div> </div> </div> <footer class="footer"> <div class="footer-menu"> <a href="https://128gb.ru/en/feedback.html" title="" class="footer-menu__item">Contacts</a> <a href="" title="" class="footer-menu__item">about the project</a> <a href="https://128gb.ru/en/feedback.html" title="" class="footer-menu__item">Advertising</a> </div> <div class="footer-bottom"> <div class="footer-bottom__wrapper"> <div class="footer-bottom__block"> <div class="footer__logo"> </div> <div class="footer__copyright" style="max-width:500px;">© 2023. Computer Help <br> <small></small> </div> </div> <div class="footer-submenu"> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/en/category/useful-tips/">Useful tips</a> </div> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/en/category/solving-problems/">Problem solving</a> </div> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/en/category/iron/">Iron</a> </div> <div class="footer-submenu__column"> </div> </div> <div class="footer-social"> </div> </div> </div> </footer> <script type="text/javascript" src="//vk.com/js/api/openapi.js?124"></script> <script> var BANNERS = { types: { code: 1, consultant: 6, modal: 9, offer: 7 } } </script> <script type="text/javascript" src="https://128gb.ru/wp-content/themes/womensovet/assets/js/app-20170207142519.js"> </script> <script type="text/javascript"> /*<![CDATA[*/ window.hashName = window.location.hash; if (window.hashName) { $(window).load(function () { $('html, body').animate({ scrollTop: $(window.hashName).offset().top} , 2000); return false; } ); } jQuery(function($) { $(document).foundation(); APP.init(); getVkSharedCount(); getFaceBookShareCount(); getOKShareCount(); } ); /*]]>*/ </script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <div class="li-stat"> </div>  <script async="async" src="https://cdn-rtb.sape.ru/teasers/js/291/2/92291.js" type="text/javascript"> </script> <br> <br> </body> </html>