carbon-components/html/search/search--large.html

Carbon Components is a component library for IBM Cloud

  <div data-search class="bx--search bx--search--lg" role="search">
    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>
    <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search" aria-labelledby="search-input-label-2">
    <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
      <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
        fill-rule="nonzero" />
    </svg>
    <button class="bx--search-close bx--search-close--hidden" title="Clear search
        input" aria-label="Clear search input">
      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
          fill-rule="evenodd" />
      </svg>
    </button>
  </div>