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

Changing placeholder text color

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

HTML

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

CSS

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

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

Changing placeholder focus text color

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

CSS

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

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

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.

Where is the placeholder?

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.

Styling a placeholder in CSS looks like this:

Input::placeholder ( color: red; opacity: 1; font-style: italic; )

Browser support

The CSS placeholder pseudo-element is handled well by all modern browsers, and to support older browsers you can use the following prefixes:

• ::-webkit-input-placeholder - for webkit browsers (Safari, Chrome, Opera);
• ::-moz-placeholder - for Firefox browsers above version 19;
• :-moz-placeholder - for older Firefox;
• :-ms-input-placeholder - for Internet Explorer above version 10.

As you can see, old Mozilla browsers, 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.

Styling options

You can set the following options for the placeholder pseudo-element in CSS:

• 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).
• text color - color;
• transparency - opacity;
• underlining, overlining or striking out - text-decoration;
• case - text-transform;
• internal indents - padding. Not supported by all browsers. As with inline elements, top and bottom padding is ignored.
• font display - properties of the font group, line-height and various indents (text-indent, letter-spacing, word-spacing);
• vertical alignment in a line - vertical-align;
• trimming text when the container overflows - text-overflow.

.input1::placeholder ( background-image: linear-gradient(lime, blue); color: white; ) .input2::placeholder ( text-decoration: line-through; color: purple; font-weight: bold; ) . input3::placeholder ( font-size: 16px; letter-spacing: 10px; ) .input4::placeholder ( background: brown; color: white; text-overflow: ellipsis; )

In focus

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.

Input:focus::placeholder ( color: transparent; )

In some browsers, it is possible to animate changes in a number of placeholder properties using the transition statement.

Input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )

IN Google browser Chrome tooltip color when focusing on such a field will smoothly change within one second.

The placeholder attribute is used to create tooltips inside empty input fields (tags And ). In this article, I'll look at ways to style placeholders, as well as how to make them more user-friendly.</p> <p>Let's start with an example for those who do not 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. Placeholder text disappears as soon as typing begins. That is why you should not use them to transmit 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 small 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 is different in each browser. More information about all the necessary prefixes can be found on caniuse.</p> <p>If you're using a CSS preprocessor, you'll likely be most comfortable writing a simple mixin to apply styles to 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, a mixin can be used to apply styles either globally or on an individual element basis (try it out on SassMeister):</p> <span>// Globally for each input field</span>@include placeholder ( color : blue ; ) <span>// For specific input fields</span>.input ( @include placeholder ( color : green ; ) ) <h4>Example</h4> <p>Blue text for placeholder (never do this):</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="Start typing here" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Supported Properties</h2> <p>Not every <a href="https://whatsappss.ru/en/security/kontent-zanimaet-70-shiriny-stranicy-parametry-css-width-i-height-dlya.html">CSS property</a> can be used with placeholders. Here <a href="https://whatsappss.ru/en/multimedia/polnyi-spisok-stop-slov-dlya-instagram-stop-slova-skachaite-odin-iz-samyh-moshchnyh.html">full list</a> 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>The animation ideas belong to the blog html5.by.</p> <p>All of the following examples are written using the Sass preprocessor. Each one comes with a link to SassMeister where you can find the compiled CSS code.</p> <p>Most likely, you will want to apply animations to placeholders when the input field has focus. All this is done quite simply. It is enough to just use the previously written placeholder mixin a few times:</p>.input ( @include placeholder ( <span>// Styles for normal state</span>) & :focus ( @include placeholder ( <span>// Styles after the focus event</span> } } } <h3>Change transparency</h3>.input ( @include placeholder ( color : #aaa ; opacity : 1 ; transition : opacity 300ms ; ) & :focus ( @include placeholder ( opacity : 0 ; ) ) ) <p> <input type="text" placeholder="Demo: Changing transparency" class="demo-css-placeholders-input pl-opacity"></p> <h3>Shift right and left</h3> <p>The wider 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 it manually. The animation speed depends on the width of the input field and the text-indent value. To shift 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 required line-height value will be within 100px . Unfortunately, the line-height property cannot be used to create an upward shift effect, 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 using animation code for placeholders pleasant and convenient, 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>It's very easy to use. It is enough to connect the desired mixin to any input field or simply create one global rule for all 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 don't use a preprocessor and still don't want your CSS source file to turn into a mess of prefixes for everyone to see <a href="https://whatsappss.ru/en/tools/medlenno-gruzit-stranicy-dolgo-gruzyatsya-stranicy-v-brauzere-vse.html">possible browsers</a>, then pay attention to Autoprefixer. With his help <a href="https://whatsappss.ru/en/what-to-do/kakoi-atribut-tega-font-pozvolyaet-ustanovit-cvet-tegi-font-face-size.html">pure CSS</a> can be made dirty (but in a different file) by adding all the necessary prefixes to all properties. To make the plugin work with placeholders, just use the 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 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. This will be fixed soon. The Selector Level 4 specification added a pseudo-class: placeholder-shown , which will finally standardize the crazy mixture of pseudo-classes and pseudo-elements that currently exists. You can monitor 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>Hello, today you won’t surprise anyone using a placeholder for input. Placeholder is a temporary text with an example inside the input that disappears when you enter text. We will try to write the CSS style for the placeholder today.</p> <h2>Task: make your own CSS style for placeholder</h2> <p>Let's say we have a stylish website that uses a placeholder in the input. We need to make the gray, boring text style of the placeholder look consistent with the general style of the site. How can this be achieved? I’ll say right away that this does not work in all browsers yet. Specifically, it doesn’t work at all in IE versions 9 and below; in 10 and later 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 testing ground:</p><p> <input type="text" name="input" placeholder="Text of our placeholder" value="" /> </p><p>Done, now let's see what we 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 let’s 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 <a href="https://whatsappss.ru/en/browser/pervye-tri-vypadayushchih-spiska-v-verhnem-ryadu-prednaznacheny-dlya.html">bold italic</a>. 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 <a href="https://whatsappss.ru/en/browser/kak-sdelat-stranicu-startovoi-v-mozile-ustanovka-nachalnoi-stranicy-v.html">Mozilla Firefox</a> 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 write any one that is more suitable for your design. A working demo can be viewed at</p> <p>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. Previously on our site there was an example using javascript, the positive side <a href="https://whatsappss.ru/en/browser/rekvizity-formy-1s-8-3-rekvizity-upravlyaemoi-formy-1cv8-metody-dlya.html">this method</a> It's cross-browser compatible. Now let's talk about styling the placeholder attribute, which is used on input and textarea elements. <br>The input field code in our example will 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 cannot 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 <a href="https://whatsappss.ru/en/administrator/gde-naiti-sohranennyi-fail-dokumenty-hranyashchiesya-v-seti-ili-na.html">different browsers</a> 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 newer ones <a href="https://whatsappss.ru/en/tips/luchshie-programmy-dlya-android-samye-nuzhnye-prilozheniya-dlya-android.html">firefox browsers</a>, webkit and blink are treated as pseudo-element.</p><p><b>Shortening text in placeholder</b><br>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.</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 when clicking on a field</b><br>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.</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> <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> </section> <section id="sidebar" class="secondary clearfix" role="complementary"> <aside id="nav_menu-3" class="widget widget_nav_menu clearfix"> <h3 class="widgettitle"><span>Categories</span></h3> <div class="menu-menyu1-container"> <ul id="menu-menyu1" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/en/category/security/">Safety</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/en/category/multimedia/">Multimedia</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/en/category/office-programs/">Office programs</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/en/category/utilities/">Utilities</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/en/category/administrator/">Administrator</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/en/category/programming/">Programming</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/en/category/browser/">Browser</a></li> </ul> </div> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widgettitle"><span>Recent Entries</span></h3> <ul> <li> <a href="https://whatsappss.ru/en/browser/kak-ubrat-parol-uchetnoi-zapisi-vindovs-v-spiske-uchetnyh.html">How to remove Windows account password</a> </li> <li> <a href="https://whatsappss.ru/en/administrator/ne-rabotaet-kamera-v-telefone-na-androide-problemy-skype-ne-rabotaet.html">Skype problems: camera doesn't work Front camera works but back camera doesn't</a> </li> <li> <a href="https://whatsappss.ru/en/browser/pochemu-ne-rabotaet-knopka-home-na-iphone-ne-rabotaet-knopka-home-na-iphone.html">Home button not working on iPhone or iPad?</a> </li> <li> <a href="https://whatsappss.ru/en/programming/rasstavlyaem-okna-v-windows-s-pomoshchyu-snap-razdelenie-ekrana-uluchshennaya-rabota-s.html">Split Screen Improved multi-monitor experience</a> </li> <li> <a href="https://whatsappss.ru/en/security/kak-vyvesti-raznoe-izobrazhenie-na-dva-monitora-rasstavlyaem-okna-v-windows-s.html">Arranging windows in Windows using Snap Improved multi-monitor experience</a> </li> <li> <a href="https://whatsappss.ru/en/browser/chem-otkryt-psd-kak-otkryt-psd-fail-chteniya-psd.html">How to open PSD? How to open a PSD file? Readings psd</a> </li> <li> <a href="https://whatsappss.ru/en/utilities/kak-knopkami-sdelat-zhestkuyu-perezagruzku-iphone-i-ipad-vse-modeli-chto-delat-esli.html">What to do if the iPhone is frozen and does not respond to any actions, how to restart the phone Hard reboot iPhone 4s</a> </li> <li> <a href="https://whatsappss.ru/en/programming/miss-keti-yutub-novye-serii-miss-keiti-smotret-novye-video---kanal.html">Miss Katie watch new videos - Miss Katie channel all episodes in a row without stopping</a> </li> <li> <a href="https://whatsappss.ru/en/utilities/samsung-galaxy-grand-prime---tehnicheskie-harakteristiki-samsung-galaxy-grand-prime-obzor.html">Samsung Galaxy Grand Prime: review, specifications and reviews What formats does Samsung Grand Prime support?</a> </li> <li> <a href="https://whatsappss.ru/en/programming/kak-sdelat-hard-reset-soni-erikson-delaem-hard-reset-na-sony-xperia-neskolko.html">Doing a Hard reset on Sony Xperia - several ways</a> </li> </ul> </aside> <aside id="nav_menu-4" class="widget widget_nav_menu clearfix" style="text-align:center;padding:0px;"> </aside> </section> </div> <div id="footer-wrap"> <footer id="footer" class="container clearfix" role="contentinfo"> </footer> </div> </div> <center style="font-size:0.8em;"> <a href='https://play.google.com/store/apps/details?id=pdf.reader.converter.jpgtopdf.imagetopdf' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=whatsappss.ru&sub2=pdf.reader.converter.jpgtopdf.imagetopdf&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a> <img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; ' loading=lazy><br><a href="https://whatsappss.ru/en/" title="The world of free programs and useful tips">The world of free programs and useful tips</a> <br>2024 whatsappss.ru <br><br> </center> <center><noindex></noindex></center> <link rel='stylesheet' id='yarppRelatedCss-css' href='/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 10, "margin_bottom" : 115, "stop_id" : "", "screen_max_width" : 800, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['nav_menu-4'] } ; </script> <script type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script></body> </html>