1

Quero formatar o botão que fica no lado do campo de busca assim:

inserir a descrição da imagem aqui

Mas não estou conseguindo:

inserir a descrição da imagem aqui

HTML:

<div class="col-6 col-md-4">
  <div class="busca">
    <input type="text" id="campo_busca" placeholder="O que você procura?">
    <button type="submit" onclick="" class="buscar_produto">
        <i class="fa fa-search" action="" ></i>
    </button> 
  </div> 
</div>

CSS:

.busca{
    margin-top: 50px;
}
#campo_busca{
    border: 1px solid;
    border-radius: 5px; 
    color:#C0C0C0;
}

3 Respostas 3

10

.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

2

Fiz esta código css:

.busca{
    margin-top: 50px;
    padding:0px;
    height: 48px;
}
#campo_busca{
    padding-left: 10px;
    border: 1px solid;
    border-radius: 5px 0px 0px 5px; 
    color:#C0C0C0;
    height: 48px;
    width: 523px;
    float: left;
}
.buscar_produto{
    border: 0px solid;
    border-radius: 0px 5px 5px 0px;
    color:#C0C0C0;
    height: 48px;
    width: 45px;
    float: left;
    background-color:#000000;
    color:#ffffff;
}

Nos meus testes funcionou, verifique se vai funcionar junto do seu css.

Aqui é onde fiz os testes:

http://www.cssdesk.com/gsE74

2

Você pode fazer assim...

.in{
    float: left;
}
.in input{
    height: 35px;
    width: 250px;
    border-radius: 5px 0 0 5px;
    border: 1px solid black;
}

.b{
    float: left;
    
}

.b button{
    height: 39px;
    border: 1px solid black;
    background: black;
    color: white;
    border-radius: 0 5px 5px 0;
        width: 35px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
    <div class="in">
        <input type="text">
    </div>
    <div class="b">
        <button>B</button>
    </div>
</body>
</html>

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 .