1

Estou desenvolvendo uma aplicação web e gostaria de formatar meu campo de busca assim.Com icon dentro e um placeholder escrito Procurar produto

inserir a descrição da imagem aqui

Olha como esta o meu campo de busca.

inserir a descrição da imagem aqui

Com as bordas redondas e com icon dentro do botão e o nome Procurar um produto dentro mas não estou conseguindo.

HTML

<div class="campo_busca"><input type="text"id="busca"><i class="fa fa-search"></i></div>

CSS

 .campo_busca{
  margin-top: 40px;
 margin-left: 160px;
 border: 1px radius solid;
}

 #busca{
 width: 90%;
  }

1 Resposta 1

0

O placeholder serve para exibir um texto prévio no campo:

placeholder="PROCURAR UM PRODUTO"

E você pode aplicar estilos ao input e ao botão de forma que eles fiquem como indicado na imagem. Usei também cursor: pointer no botão para que o ícone do mouse mude ao passar por cima.

*{
   position: relative;
}

.campo_busca{
   margin-top: 40px;
   margin-left: 160px;
}

#busca{
   width: 90%;
   border: 1px solid #000;
   border-radius: 5px;
   padding: 30px 30px 30px 50px;
   text-align: center;
}

.campo_busca i{
   position: absolute;
   top: 50%;
   left: 25px;
   transform: translateY(-50%);
   cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="campo_busca">
   <input placeholder="PROCURAR UM PRODUTO" type="text" id="busca">
   <i class="fa fa-search"></i>
</div>

Adicione também position: relative a todos os elementos da página, para que se possa movê-los ou posicioná-los. Inclua no CSS:

*{
   position: relative;
}

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 .