@govbr-ds/core/dist/components/input/examples/input-highlight.html

Padrão Digital de Governo

<div class="col-sm-10 col-lg-8 mb-3">
  <div class="br-input input-highlight">
    <label class="sr-only" for="input-highlight-labeless">Label / Rótulo</label>
    <input id="input-highlight-labeless" type="text" placeholder="Placeholder"/>
  </div>
</div>
<div class="col-sm-10 col-lg-8 mb-3">
  <div class="br-input input-highlight">
    <label class="sr-only" for="input-highlight-search-labeless">Label / Rótulo</label>
    <input id="input-highlight-search-labeless" type="search" placeholder="Placeholder"/>
    <button class="br-button" type="button" aria-label="Buscar"><i class="fas fa-search" aria-hidden="true"></i>
    </button>
  </div>
</div>
<div class="col-sm-10 col-lg-8 mb-3">
  <div class="br-input input-highlight">
    <label class="sr-only" for="input-highlight-icon-search-labeless">Label / Rótulo</label>
    <div class="input-group">
      <div class="input-icon"><i class="fas fa-user" aria-hidden="true"></i>
      </div>
      <input class="input-highlight" id="input-highlight-icon-search-labeless" type="search" placeholder="Placeholder"/>
    </div>
    <button class="br-button" type="button" aria-label="Buscar"><i class="fas fa-search" aria-hidden="true"></i>
    </button>
  </div>
</div>