Search field with rounded edge

Asked

Viewed 164 times

2

I’d like to make a input adjacent to a button with a rounded edge that fits together as follows:

Pesquisa

Is there any way to do this with CSS pure, preferably without using the search field above the button?

html css

  • Can be using a div editable?

  • @Ricardopunctual didn’t quite understand what it would be... but I don’t know, I just need to do this search field there and I don’t know anything about design hahaha

  • 1

    See if this helps https://jsfiddle.net/6kzLud4v/ I made it real quick in the fiddle

2 answers

6


You can use the 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>

  • 1

    I have to say I’m impressed...

  • If you have helped, by marking as an answer to your question.

1

Like you said you didn’t want the input getting over the button made this simple model. The hint here is that the box-shadow of the btn is that it is below the 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>

Browser other questions tagged html css

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