Gostaria de fazer um input
de pesquisa adjacente a um botão com uma borda arredondada que encaixe um no outro da seguinte forma:
Existe alguma forma de fazer isso com CSS
puro, de preferência sem utilizar o campo de pesquisa por cima do botão?
Pode usar o 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>
Como vc falou que não queria o input
ficando por cima do button
fiz esse modelo simples. A dica aqui é que o box-shadow
do btn é que fica por baixo do input
dando a impressão que é uma coisa só.
* {
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>
div
editável?