Prestyled Modules von in2code

<insert-markup>500.1-</insert-markup>
Markup: ../output/500-searchfield/searchfield-width-magnifier.html

<form class="c-searchfield" id="searchform" method="post" action="#">
  <svg style="display: none" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <path id="svgsearchicon" fill="currentColor" d="M19.427 20.427c-1.39.99-3.09 1.573-4.927 1.573C9.806 22 6 18.194 6 13.5S9.806 5 14.5 5 23 8.806 23 13.5c0 1.837-.583 3.537-1.573 4.927l5.585 5.585c.55.55.546 1.43 0 1.976l-.023.023c-.545.545-1.432.547-1.977 0l-5.585-5.584zM14.5 20c3.59 0 6.5-2.91 6.5-6.5S18.09 7 14.5 7 8 9.91 8 13.5s2.91 6.5 6.5 6.5z"></path>
  </svg>
  <input class="c-searchfield__input" id="searchword" aria-label="Suchbegriff eingeben" title="Suchbegriff eingeben" placeholder="Suchbegriff eingeben" type="search" name="searchword"/>
  <button class="c-searchfield__button c-searchfield__button--magnifier" aria-label="Suchen" value="Search" type="submit" name="searchbutton">
    <svg class="c-searchfield__magnifiericon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <use xlink:href="/Images/svg/sprite.symbol.svg#iconmonstr-magnifier-10" x="0" y="0"></use>
    </svg>
  </button>
</form>
Source: ../../modules/500-searchfield/_components.search.scss, line 9