Edit search field with CSS icon

Question

I am developing a web application and would like to format my search field like this. With icon inside and a placeholder written Search product

Look at my search ground.

With the round edges and icon inside the button and the name Find a product inside but I’m not getting it.

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%;
  }

Answer 1

The placeholder serves to display a previous text in the field:

placeholder="PROCURAR UM PRODUTO"

And you can apply styles to input and the button so that they look as indicated in the image. I also used cursor: pointer on the button for the mouse icon to change when passing over.

*{
   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>

Also add position: relative to all page elements, so you can move or position them. Include in CSS:

*{
   position: relative;
}