Using IPS styles in Page

[Mercury Forever]

Hello ... I'm building a search engine in html + js, using the IPS's styles, for that I'm copying the native search engine's design, but the styles do not apply well in a page that I created. I understand that the pages inherit the IPS styles, so they should look good ...

I share the code I use for the search engine. It is the same one that IPS uses.

<div class='cWidgetContainer ' data-controller='core.front.widgets.area' data-role='widgetReceiver' data-orientation='horizontal' data-widgetArea='header'>
   <ul class='ipsList_reset'>
      <div data-controller='core.front.search.main'>
         <div class='ipsAreaBackground ipsPad ipsSpacer_top' data-controller='core.front.search.filters' id='elSearchFilters'>
            <div class="ipsPhotoPanel ipsPhotoPanel_mini cSearchMainBar">
               <button onclick="myFunction()" type="submit" class="cSearchPretendButton ipsPos_left" tabindex="-1"><i class="fa fa-search ipsType_huge"></i></button>
               <div>
                  <input type="text" id="elMainSearchInput" name="q" value="" placeholder="Buscar palabra" class="ipsField_primary ipsField_fullWidth">
                  <button onclick="myFunction()" type="submit" id="elSearchSubmit" class="ipsButton ipsButton_primary ipsButton_verySmall ipsPos_right ipsResponsive_hidePhone" data-action="searchAgain">Buscar</button>
                  <br>
                  <hr class="ipsHr">
               </div>
            </div>
         </div>
      </div>
   </ul>
</div>
<script>
   function myFunction() {
     alert("Hello World");
   }
</script>

The only additional thing is the JS code, which adds it as a button action, to see that it works well (it does)

Greetings and thanks to all..!!

[opentype]

Stylings aren’t automatically inherited, for example if they are narrowed down to certain parent elements, which don’t exist in other places. Also, it is not a good idea to repeat “id” elements. They need to be unique on a page. 

You can user your browser inspection tools to see which stylings are applied to the original search section and what is missing or overridden in your custom search. Just looking at your screenshot doesn’t reveal anything. 

[Mercury Forever]

Thanks for the recommendation and the time to respond ... I will review what you indicate.

As a result, I would expect the visual to be the same as the IPS, as you will see, the buttons do not take their position or size.

This is the result I hope to obtain.

[Mercury Forever]

browser inspection is great