2

Gostaria de fazer um input de pesquisa adjacente a um botão com uma borda arredondada que encaixe um no outro da seguinte forma:

Pesquisa

Existe alguma forma de fazer isso com CSS puro, de preferência sem utilizar o campo de pesquisa por cima do botão?

3
  • Pode ser usando um div editável? Commented 8/11/2018 às 15:24
  • @RicardoPontual não entendi bem o que seria... mas não sei, eu só preciso fazer esse campo de busca aí e não sei nada de design hahaha
    – Sorack
    Commented 8/11/2018 às 15:25
  • 1
    Veja se isso ajuda jsfiddle.net/6kzLud4v Fiz rapidinho no fiddle Commented 8/11/2018 às 15:35

2 Respostas 2

6

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>

2
  • 1
    Tenho que dizer que estou impressionado...
    – Sorack
    Commented 8/11/2018 às 16:02
  • Caso tenha ajudado, por marcar como resposta de sua dúvida.
    – Felipe Paz
    Commented 8/11/2018 às 16:11
1

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>

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 .