Appearance of field names or how to change placeholder. How to change color of tooltip text in placeholder using css styles? css change placeholder color

placeholder="(!LANG:hint text" !}</b>>

In an effort to reduce shape and reduce visual noise, tag designers are replaced by the placeholder attribute, thereby increasing the load on short-term memory. For visually impaired people, the hint is difficult to read. Better place directly above the input field. An empty field is more easily recognized as an element that needs to be filled.

Badly

Good

Styling: change color of placeholder 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 set.</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 JavaScript value</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>The placeholder attribute is used to create tooltips inside empty input fields (tags <input>and <textarea>). In this article, I will look at ways to style placeholders, as well as how to make them more usable.</p> <p>Let's start with an example for those who don't yet know what a placeholder is and how to use it:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>When developing interfaces, you should take into account the behavior of placeholders. The placeholder text disappears as soon as typing begins. That is why you should not use them to convey information about the input field itself (how many and what characters it should contain). For these purposes, it is best to use the tag <label>or a paragraph with a little hint. You can read more about the features of using placeholders.</p> <h2>Stylization</h2> <p>The following rules are used to style placeholders:</p>::-webkit-input-placeholder ( color : blue ; ) ::-moz-placeholder ( color : blue ; ) /* Firefox 19+ */ :-moz-placeholder ( color : blue ; ) /* Firefox 18- * / :-ms-input-placeholder ( color : blue ; ) <p>Looks terrible, doesn't it? And there is a reason for this - until now, CSS rules for placeholders have not been standardized and the implementation in each browser is different. You can learn more about all the necessary prefixes at caniuse .</p> <p>If you're using a CSS preprocessor, you'll probably find it best to write a simple mixin to style placeholders. Example in Sass:</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @content ; ) ) <p>Depending on the context, the mixin can be used to apply styles globally or on individual elements (try it out on SassMeister):</p> <span>// Globally for each input field</span>@include placeholder ( color : blue ; ) <span>// For certain input fields</span>.input ( @include placeholder ( color : green ; ) ) <h4>Example</h4> <p>Blue text for the placeholder (never do this):</p>.blue-text ::-webkit-input-placeholder ( color : #2e8ece ; ) .blue-text :-moz-placeholder ( color : #2e8ece ; ) ; ) .blue-text :-ms-input-placeholder ( color : #2e8ece ; ) <p> <input type="text" placeholder="Start typing here" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Supported Properties</h2> <p>Not every CSS property can be used with placeholders. Here is the complete list of supported properties:</p> <ul><li>font and all related properties (font-size , font-family , etc.)</li> <li>background and all related properties (background-color , background-image , etc.)</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>Animations</h2> <p>Animation ideas belong to the html5.by blog.</p> <p>All of the following examples are written using the Sass preprocessor. Each comes with a link to SassMeister where you can find the compiled CSS code.</p> <p>You will most likely want to apply animations to placeholders when the focus is on an input field. All this is done quite simply. It is enough just to use the previously written placeholder mixin a few times:</p>.input( @include placeholder( <span>// Styles for the normal state</span>) & :focus ( @include placeholder ( <span>// Styles after the focus event</span> } } } <h3>Changing transparency</h3>.input ( @include placeholder ( color : #aaa ; opacity : 1 ; transition : opacity 300ms ; ) & :focus ( @include placeholder ( opacity : 0 ; ) ) ) <p> <input type="text" placeholder="Demo: change transparency" class="demo-css-placeholders-input pl-opacity"></p> <h3>Shift right and left</h3> <p>The larger the width of the input field, the larger the value of the text-indent property should be. For a standard input field, 500px will be enough, for wider ones, you should select manually. The width of the input field and the text-indent value determine the speed of the animation. To shift to the left, you need to use negative values, for example -500px .</p><p> <input type="text" placeholder="Demo: shift right" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: shift left" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Shift down</h3> <p>As in the previous example, the animation depends on the size of the input, but in this case, pay attention to the height. For the vast majority of input fields, the desired line-height value will be within 100px . Unfortunately, using the line-height property, it is impossible to implement the effect of moving up, since the property does not accept negative values.</p>.input ( @include placeholder ( text-indent : 0px ; transition : text-indent 300ms ; ) & :focus ( @include placeholder ( text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="Demo: shift down" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Together</h3> <p>To make it nice and convenient to use the animation code for placeholders, you can write a small library of mixins for any preprocessor. The library looks like this ():</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>Its very easy to use. It is enough to connect the desired mixin to any input field, or simply create one global rule for all the paceholders on the page:</p> <span>// For individual elements</span>.pl-shift-right ( @include pl-shift ( right ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// For everything else</span>@include pl-shift ( left ); <h2>Autoprefixer</h2> <p>If you're not using a preprocessor and still don't want your CSS source file to turn into a mess of prefixes for all possible browsers, then take a look at Autoprefixer . With it, pure CSS can be made dirty (but in a different file) by adding all the necessary prefixes to all properties. To make the plugin work with paceholders, it is enough to use pseudo-element::placeholder:</p>::placeholder ( color : orange ; ) . input : : placeholder ( color : blue ; ) <p>After parsing your styles, Autoprefixer will create a separate CSS file in which it will write all the necessary prefixes for all the browsers you specified.</p> <h2>What's next</h2> <p>As I wrote above, everything related to applying styles to placeholders has not yet been standardized. It will be fixed soon. A pseudo-class was added to the Selector Level 4 specification: placeholder-shown , which will finally bring to the standard all that crazy mixture of pseudo-classes and pseudo-elements that exists now. You can check support on caniuse (currently not supported in any browser).</p> <p>Applying styles with :placeholder-shown will be much easier:</p>.input :placeholder-shown ( color : blue ; ) <p>If you're not familiar with the placeholder attribute, let's explain a bit what it is and where it's used. It is used in form input fields. The attribute displays an inscription in the input field, representing the role of a hint. Earlier on our site there was an example using javascript, the positive side of this method is cross-browser compatibility. Now let's talk about styling the placeholder attribute, which is used on the input and textarea elements. <br>The code for the input field in our example would look something like this:</p><p> <input type="text" placeholder="Enter your name"> </p><p>At the output, we get the following field: <input type="text" placeholder="Enter your name"></p> <p>Now let's imagine that we need to style the placeholder, for this we need to write a set of rules in CSS:</p><p>::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( color: #c1c1c1; )</p><p>We get: <input class="plc" type="text" placeholder="Enter your name"></p> <p>We can not change all properties, but a list of most of them supported by modern browsers is given below: <br><b>font</b>(also related properties) <br><b>background</b>(also related properties) <br><b>color</b><br><b>word-spacing</b><br><b>letter spacing</b><br><b>text-decoration</b><br><b>vertical-align</b><br><b>text-transform</b><br><b>line-height</b><br><b>text indent</b><br><b>text overflow</b><br><b>opacity</b></p> <p>In different browsers, the rule is written differently, because. as long as there is no single standard, this set of records continues to be relevant. In IE browser, as well as firefox below version 18, placeholder is perceived as a pseudo-class, and in new browsers firefox, webkit and blink is perceived as a pseudo-element.</p><p><b>Shorten text in placeholder</b><br>Sometimes hints can be so long that they cannot fully fit into the input field. For these purposes, you can also use additional properties that will shorten the placeholder text in the input field.</p><p>Input ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :ellipsis; )</p><p>As a result, we get an input field with a placeholder like this: <input class="plc2" type="text" placeholder="Enter your name"></p><p><b>Hide text on click</b><br>By default, each browser interprets the placeholder response differently. In some browsers, it is hidden immediately when you click on the field, in others it is hidden if there is at least one character in the input field. Let's make it so that the text is hidden when clicking on the field, the same in all browsers.</p><p>:focus::-webkit-input-placeholder ( color: transparent; ) :focus::-moz-placeholder ( color: transparent; ) :focus:-moz-placeholder ( color: transparent; ) :focus:-ms-input -placeholder (color: transparent; )</p><p>We get this action:</p> <p>The placeholder attribute is used to call to action inside empty input and textarea elements. In this article, we will look at the possibilities of styling placeholder-a text, as well as some tricks that will make it more convenient and functional.</p> <p>So, let's start with an example for those who don't know what a placeholder is.</p> <h4>html</h4> <input type="text" placeholder="Leave a message here"> <p>Placeholder-a style can be changed using the following set of css rules:</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>Looks scary, doesn't it? The fact is that this is still not in the standards. Each browser has implemented support for placeholder styling in its own way.</p> <p>In IE and older firefox (pre-18) placeholder is considered a pseudo-class, while in newer firefox, webkit and blink it is a pseudo-element.</p> <p>Let's see what happened:</p> <p>I must say that not all possible css properties are supported. Most modern browsers allow you to change:</p> <ul><li>font (and related properties)</li> <li>background (and related properties)</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>What if the placeholder doesn't fit?</h2> <p>Sometimes text input fields are reduced in width due to layout features, in particular on mobile devices. In this case, the long text of the placeholder will be ugly cut off. To prevent this, you can use text-overflow: ellipsis . This syntax will work in all new browsers.</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>How to hide placeholder on focus?</h2> <p>Hiding a placeholder occurs in different ways.</p> <ol><li>in some browsers when getting focus by input</li> <li>in other browsers if there is at least one character entered</li> </ol><p>I like the first option better. In order to set this behavior in all browsers that support placeholder, we define the following css rules:</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>Hiding the placeholder nicely</h2> <p>You can also add a transition to show and hide the placeholder:</p> <h4>css</h4>/* fade placeholder opacity on focus */ .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;) focus*/ .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-placeholde r(text-indent: 0px; transition: text-indent 0.3s ease;) .input2:focus::-webkit-input-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;) 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;) /* move the placeholder down on focus */ .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;) -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;) er (line-height: 100px; .input3:focus:-ms-input-placeholder (line-height: 100px; transition: line-height 0.5s ease;) <p>Hope you find it useful. Write comments and suggestions in the comments.</p> <p>Hi, today using placeholder for input is no surprise. Placeholder is temporary text with example inside input that disappears when text is entered. CSS style for placeholder, we will try to register today.</p> <h2>Task: make your own css style for placeholder</h2> <p>Let's say we have a stylish site that uses a placeholder in the input. We need to make the placeholder's gray drab text style look in the general style of the site. How can this be achieved? I must say right away that this does not work in all browsers yet. Specifically, in IE version 9 and below it does not work at all, in IE 10 and further it still works with great difficulty. Firefox and webkit browsers are another matter.</p> <h2>Solution: css style for placeholder</h2> <p>So, we have set the task, how are we going to solve it?</p> <p>First, let's create a test site:</p><p> <input type="text" name="input" placeholder="The text of our placeholder" value="" /> </p><p>Done, now let's see what you can do with the style: webkit and mozilla have their own modifiers that allow you to assign a special style to the placeholder: ::-webkit-input-placeholder and :-moz-placeholder. Let's see how to use them:</p> <p>Let's describe the style of the input itself and the text in it (blue color for contrast in the example):</p><p>Input( width: 250px; color: blue; font-weight: normal; font-style: normal; )</p><p>Now we will write a special style for the placeholder text in this input for Webkit browsers (Chrome, Safari, Opera):</p><p>Input::-webkit-input-placeholder( color: red; font-style: italic; font-weight: bold; )</p><p>Let's make the placeholder text red bold italic. Note that unlike other CSS pseudo-classes, which are separated by a single colon, the style for placeholder in webkit is separated by a double colon.</p> <p>Now let's write exactly the same style for Mozilla Firefox browsers:</p><p>Input:-moz-placeholder( color: red; font-style: italic; font-weight: bold; )</p><p>Ready. CSS style for placeholder, of course you can prescribe any one that is more suitable for your design. A working demo can be viewed at</p> <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> </div> </article> <div class="related_block"> <div class="title">Similar posts</div> <ul class="recent_ul"> <li> <div class="img_block"> <div class="overlay"></div> <img src="/uploads/013f821adc8c8ff97520ba1d0b6bef58.jpg" style="width:230px; height:145px;" / loading=lazy loading=lazy></div> <a href="https://armypublic.ru/en/sberbank/gostevoi-dom-ai-otel-ai-serez-sudak-foto-i-otzyvy-turistov-chto.html">Ai-Serez Hotel, Sudak: photos and reviews of tourists What is personal data</a></li> <li> <div class="img_block"> <div class="overlay"></div> <img src="/uploads/51fd68ac144b242e88e65536d6dc026c.jpg" style="width:230px; height:145px;" / loading=lazy loading=lazy></div> <a href="https://armypublic.ru/en/tele2/vigo-di-fassa-gornolyzhnye-kurorty-italiival-di-fassa-val-di-fassa.html">Ski resorts in Italy Val di Fassa Changing privacy settings</a></li> <li> <div class="img_block"> <div class="overlay"></div> <img src="/uploads/43a5532b71df62573a4dbf2a2b27c787.jpg" style="width:230px; height:145px;" / loading=lazy loading=lazy></div> <a href="https://armypublic.ru/en/beeline/pryamoe-bronirovanie-pryamoe-bronirovanie-aviabiletov-i-otelei.html">Direct booking of flights and hotels</a></li> </ul> </div> </div> <aside id="sidebar"> <div class="block"> <nav class="sidebar_menu"> <div class="menu-sidebar_menu-container"> <ul id="menu-sidebar_menu" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/banks/">Banks</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/beeline/">Beeline</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/webmoney/">WebMoney</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/instructions/">Instructions</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/maps/">Cards</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/megaphone/">Megaphone</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/mts/">Mts</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/pyaterochka/">Pyaterochka</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/rostelecom/">Rostelecom</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/sberbank/">Sberbank</a></li> </ul> </div> </nav> </div> <div class="block recent_block"> <div class="title">The last notes</div> <ul class="popular"> <li> <div class="img_block"> <div class="overlay"></div> <img width="240" height="145" src="/uploads/14b6c0cf814edf4c276e94756c1b4f5a.jpg" class="attachment-popular_thumb size-popular_thumb wp-post-image" alt="Vacation Rental in Montenegro" / loading=lazy loading=lazy> <span class="cat">WebMoney</span></div> <a href="https://armypublic.ru/en/maps/rannee-bronirovanie-chernogoriya-zhile-dlya-otdyha-v-chernogorii-chto.html">Vacation Rental in Montenegro</a></li> <li> <div class="img_block"> <div class="overlay"></div> <img width="240" height="145" src="/uploads/545389813e7eafdea924482b7b5417d0.jpg" class="attachment-popular_thumb size-popular_thumb wp-post-image" alt="Vacation Rental in Montenegro" / loading=lazy loading=lazy> <span class="cat">WebMoney</span></div> <a href="https://armypublic.ru/en/pyaterochka/rannee-bronirovanie-turov-na-god-chernogoriya-zhile-dlya-otdyha-v-chernogorii.html">Vacation Rental in Montenegro</a></li> <li> <div class="img_block"> <div class="overlay"></div> <img width="240" height="145" src="/uploads/7c46d93b1554ed83d6552515f1c92f0c.jpg" class="attachment-popular_thumb size-popular_thumb wp-post-image" alt="Caribbean - children's water park!" / loading=lazy loading=lazy> <span class="cat">WebMoney</span></div> <a href="https://armypublic.ru/en/beeline/akvapark-dlya-detei-ot-3-let-karibiya---detskii-akvapark-k-obyazatelnym-veshcham-v.html">Caribbean - children's water park!</a></li> </ul> </div> </aside> </div> </div> <div class="clear"></div> <footer id="footer"><div class="wrapper"> <div class="copy">2022 | How to translate</div> <nav class="header_menu"> <div class="menu-footer_menu-container"> </div> </nav> </div></footer> <div id="toTop"></div> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <nav class="mobile_menu"> <div class="close_menu"></div> <div class="mob_menu"> <div class="menu-mobile_menu-container"> <ul id="menu-mobile_menu" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/banks/">Banks</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/beeline/">Beeline</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/webmoney/">WebMoney</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/instructions/">Instructions</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/maps/">Cards</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/megaphone/">Megaphone</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/mts/">Mts</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://armypublic.ru/en/category/pyaterochka/">Pyaterochka</a></li> </ul> </div> </div> </nav> </body> </html>