2

<form class="form-inline my-2 my-lg-0 pl-3-lg">

    <input class="form-control" type="search" placeholder="Pesquisar" aria-label="Search">
    <button class="btn btn-dark ml-1" type="submit">
      <img src="img/searchIcon.png">
    </button>

</form>
Ao invés de ficar um botão ao lado do input, eu queria que ficasse um ícone de pesquisa dentro do input, usando bootstrap, como faço isso?

Exemplo:

inserir a descrição da imagem aqui

1

1 Resposta 1

7

Essa seria uma opção, mas terá que fazer na "marra" o estilo, para que o ícone de pesquisa fique na cor do <input>:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="col-sm-3 my-1">
  <div class="input-group">
    <input class="form-control" type="search" placeholder="Pesquisar" aria-label="Search" style="border-right: none;">
    <div class="input-group-append">
      <div class="input-group-text" style="background-color: #FFF"><i class="fas fa-search"></i></div>
    </div>
  </div>
</div>

2
  • Vlw! Esqueci de perguntar uma coisa. Sabe quando a pessoa clica com o mouse dentro do input e a borda fica azul?! Então, você sabe como alterar essa cor? Já vasculhei o css do Bootstrap e não achei como alterar a cor. Commented 7/09/2018 às 19:51
  • 1
    Para retirar o focus, você pode utilizar: input[type="search"]:focus{border-color: #ced4da; box-shadow: 0 0 0 0; outline: 0;}, se quiser alterar a cor utilize: input[type="search"]:focus{ border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);} Commented 7/09/2018 às 20:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .