Format search field with CSS button

Asked

Viewed 1,528 times

1

I want to format the button that is on the side of the search field like this:

inserir a descrição da imagem aqui

But I’m not getting it:

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;
}
html css css3

3 answers

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>

The two elements were referenced by the same class, this helps when applying styles in both, to apply separately you can reference with nth-child() passing as parameter the element order. padding will create the spacing, border-radius will accept 4 parameters 1 for each side, text-indent will set the button icon and 

.idem:nth-child(1):focus {
  box-shadow: 0 0 0 0;
  outline: 0;
  border: 1px #DDD solid;
}

Remove the border by clicking on input

2


I made this css code:

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

In my tests it worked, check if it will work together with your css.

This is where I ran the tests:

http://www.cssdesk.com/gsE74

2

You can do it like this...

.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>

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.