.idem {
padding: 15px;
border: 1px #DDD solid;
}
.idem:nth-child(1){
width: 300px;
border-radius: 10px 0px 0px 10px;
}
.idem:nth-child(2){
width: 40px;
border-radius: 0px 10px 10px 0px;
text-align:left;
color: white;
background: black;
border: 1px black solid;
cursor: pointer;
text-indent: -1.3px;
}
.idem:nth-child(1):focus {
box-shadow: 0 0 0 0;
outline: 0;
border: 1px #DDD solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="col-6 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?" class="idem"><button type="submit" onclick="" class="buscar_produto idem"><i class="fa fa-search" action=""></i></button> </div>
</div>
Os dois elementos foram referenciados pela mesma classe, isso ajuda na hora de aplicar estilos em ambos, para aplicar separadamente você pode referenciar com nth-child()
passando como parâmetro a ordem do elemento. padding
irá criar os espaçamentos, border-radius
irá aceitar 4 parâmetros 1 para cada lado, text-indent
irá regular o icone do botão e
.idem:nth-child(1):focus {
box-shadow: 0 0 0 0;
outline: 0;
border: 1px #DDD solid;
}
Retira a borda ao clicar no input