10

Estou tentando fazer um campo de busca com um ícone usando Font Awesome, quero que fique assim:

efeito desejado

mas ele fica assim:

efeito atual

Qual a melhor forma de colocar o button dentro do input?

HTML:

<form>
<input type="search" />
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
1
  • 1
    Use uma imagem como fundo do input. Não sei como fazer com o fontawesome, mas o princípio é esse.
    – bfavaretto
    20/10/2014 às 1:16

3 Respostas 3

14

Serve com um pouco de CSS "na mão"?


Usando Bootstrap:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<div class="col-xs-6">
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">
      <button class="fa fa-search" style="background:transparent;border:none"></button>
    </span>
  </div>
</div>


Usando CSS

.submit-lente {
  position:absolute;
  top:0; right:0;
  z-index:10;
  border:none;
  background:transparent;
  outline:none;
}

.submit-line {
  position: relative;
  width: 200px;
}

.submit-line input {
  width: 100%;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div class="submit-line">
  <input type="text" />
  <button class="submit-lente" type="submit">
    <i class="fa fa-search"></i>
  </button>
</div>
</form>


Considerações:

Usando line-height você consegue centralizar a lente na linha com facilidade;

Este é só um esboço para mostrar uma das possibilidades, mas que merece um cuidado maior nos alinhamentos e tudo o mais.

4
  • IMO, tirando o outline do ícone ao clicar, fica perfeito
    – brasofilo
    20/10/2014 às 2:02
  • @brasofilo pus só o essencial, alem de tudo ja ta sem action... Provavelmente mereça bem mais que isso, como line-height pra centralizar a lupa, margens decentes, etc.
    – Largato
    20/10/2014 às 2:03
  • yes, sir, o prato já tá feito, só comentei sobre a pimentinha, +1+
    – brasofilo
    20/10/2014 às 2:07
  • @brasofilo o comentário é bem-vindo :) Só não vou acatar agora, senão vou acabar colocando mais umas 378 coisas no CSS (lembre do TOC ;D tou tentando "desapegar").
    – Largato
    20/10/2014 às 2:09
7

Mais uma outra opção. Formatando o elemento lupa como uma div, inserindo o gráfico usando \f002 e usando o ponteiro indicando que há um evento - o alerta é o demonstrativo do evento click.

/* campo do formulário */
input{
   border:#ddd solid 1px;
   float:left;
   padding:5px 20px 5px 5px
}

/* formatação do elemento */
#lupa{
   float:left;
   margin:3px 0px 0px -20px;
   cursor:pointer
}

/* formatação do conteúdo  */
#lupa:after{
   font-family:FontAwesome;
   font-size:14px;
   content:"\f002"
}
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css' type='text/css'>

<input type="text" />
<div id="lupa" onclick="alert('ok :)');"></div>

3
  • se escreveres muitos caráteres o botão de pesquisar é sobreposto, não sei se é este o intento do AP.
    – Cold
    20/10/2014 às 9:09
  • @Cold, basta usar padding para isso. São meros detalhes, mas atualizei. 20/10/2014 às 9:32
  • 1
    Perfecto @PapaCharlie
    – Cold
    20/10/2014 às 9:55
5

Esta resposta não soluciona o problema apresentado. É parecido pois o ícone fica dentro do input mas ele não serve como botão para acionar a busca.

Achei a solução em Use Font Awesome Icon in Placeholder e text-align: right; only for placeholder?. Defina a fonte do placeholder como FontAwesome e use o código do ícone de busca no seu valor:

input[type=text] {
  width: 188px;
  height: 16px;
  font-family: serif;
}
/* webkit solution */
::-webkit-input-placeholder { 
  font-family: FontAwesome;
  text-align:right; 
}
/* mozilla solution */
input:-moz-placeholder { 
  font-family: FontAwesome;
  text-align:right; 
}
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css' type='text/css'>
<input type="text" placeholder="Procurar &#xF002;" value="" tabindex="1" autocomplete="off">

4
  • Tem de defnir a fonte no próprio input, e não no placeholder?
    – bfavaretto
    20/10/2014 às 1:38
  • Na verdade eu quero que o ícone seja um submit. 20/10/2014 às 1:42
  • @brasofilo Ele quer o ícone dentro do input, clicável, submetendo o form no clique.
    – bfavaretto
    20/10/2014 às 1:43
  • @user3386417, igual nas provas da escola/universidade, não lê o enunciado direito, termina respondendo atravessado :) Vou manter esta resposta aqui porque agradei mucho dessa técnica. Tem um userscript que é parecido à esta situação, ele adiciona um botão aqui no search do Stack Exchange: Click to Search
    – brasofilo
    20/10/2014 às 1:52

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 .