I would like to make a input of search adjacent to a button with a rounded border that will fit into each other as follows:
Is there any way to do this with CSS pure, preferably without using the search field above the button?
You can use border-radius .
.container {
box-sizing: border-box;
background: #0699CD;
width: 100%;
padding: 20px 10px;
}
.content {
background: #33CB33;
width: 100%;
box-sizing: border-box;
height: auto;
border-radius: 20px;
}
.content input {
border-radius: 20px;
background: #82CCE6;
padding: 10px;
width: 70%;
border: none;
margin-right: 10px;
}
.content button {
background: transparent;
border: none;
color: #fff;
text-transform: uppercase;
}<div class="container">
<div class="content">
<input type="text">
<button>Pesquisar</button>
</div>
</div> How did you say that I did not want input getting over button made this model simple. The hint here is that box-shadow of btn is underneath input giving the impression that it is one thing.
* {
box-sizing: border-box;
}
body {
background-color: #0699CD;
}
.search-bar {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.search-bar input {
width: 75%;
height: 50px;
line-height: 50px;
background-color: #82CCE6;
border: 1px solid #ddd;
padding: 0 1rem;
font-size: 1rem;
font-family: sans-serif;
border-radius: 25px;
z-index: 1;
}
.search-bar button {
background-color: #33CB33;
box-shadow: -50px 0 0 0 #33CB33;
color: #fff;
cursor: pointer;
border: none;
padding: 0 1rem;
font-size: 1rem;
font-family: sans-serif;
border-radius: 25px;
}<nav class="search-bar">
<input type="text" value="teste">
<button type="submit">pesquisar ></button>
</nav>