Border radius not applied to form's submit button-CodePudding

For a project, I need to create the following search bar:

But I have a small problem with the border-radius, since it doesn't apply to the left border of my button.

I have tried to force it by adding !important and to use border-collapse property, but it don't work and I really can't see where is the problem :/.

Here is my code:

#search-content {
  display: flex;
}

#search-form {
  border: 1px solid #F2F2F2;
  border-radius: 13px;
  height: 41px;
  overflow: hidden;
}

#location-icon {
  padding: 15px;
  border-radius: 5px 0px 5px 0px;
  background-color: #F2F2F2;
}

#search-input {
  border-width: 0px;
}

#search-button {
  color: #fff;
  background-color: #0065FC;
  border-radius: 13px;
  border-width: 0px;
  height: 49px;
  width: 40px;
  cursor: pointer;
}

<script src="https://kit.fontawesome.com/1f544e41e8.js" 
        crossorigin="anonymous"></script>
<div id="search-content">
  <form id="search-form">
    <i id="location-icon" ></i>
    <input id="search-input" type="text" placeholder="Marseille, France" />
    <button id="search-button" type="submit">
      <i ></i>
    </button>
  </form>
</div>

I thank in advance anyone who will take the time to try to help me!

CodePudding user response：

There seemed to be an issue with the defined height of #search-button. I've changed the property to have 100% of its parents' container height and that seemed to solve the issue you were having.

#search-content {
  display: flex;
}

#search-form {
  border: 1px solid #F2F2F2;
  border-radius: 13px;
  height: 49px;
  overflow: hidden;
}

#location-icon {
  padding: 15px;
  border-radius: 5px 0px 5px 0px;
  background-color: #F2F2F2;
  height: 100%;
}

#search-input {
  border-width: 0px;
}

#search-button {
  color: #fff;
  background-color: #0065FC;
  border-radius: 13px;
  border-width: 0px;
  height: 100%;
  width: 40px;
  cursor: pointer;
}

<script src="https://kit.fontawesome.com/1f544e41e8.js" 
        crossorigin="anonymous"></script>
<div id="search-content">
  <form id="search-form">
    <i id="location-icon" ></i>
    <input id="search-input" type="text" placeholder="Marseille, France" />
    <button id="search-button" type="submit">
      <i ></i>
    </button>
  </form>
</div>

CodePudding user response：

You'll probably have a better time not specifying any heights.

Also, you weren't really using flex - this is. (You can switch width for max-width if you like, or constrain search-input to have a min-width...)

#search-form {
  border: 1px solid #F2F2F2;
  border-radius: 13px;
  display: flex;
  width: 350px;
}

#location-icon {
  padding: 15px;
  border-radius: 13px 0px 0px 13px;
  background-color: #F2F2F2;
}

#search-input {
  border-width: 0px;
  background: none;
  padding: 15px;
  margin: 0;
  flex: 1;
}

#search-button {
  color: #fff;
  background-color: #0065FC;
  border-radius: 13px;
  border-width: 0px;
  padding: 15px;
  cursor: pointer;
}

<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>
<form id="search-form">
  <i id="location-icon" ></i>
  <input id="search-input" type="text" placeholder="Marseille, France" />
  <button id="search-button" type="submit">
      <i ></i>
    </button>
</form>