I want to format the button on the side of the search field like this:
ButIcannot:
HTML:
<divclass="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;
}
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, make sure it works next to your css.
Here's where I tested:
.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 order of the element. padding will create the spaces, 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
You can do 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>