Problem with the background color of a search form-CodePudding

For a personal project, I need to create the following search form.

I have almost succeeded, but I have a little with the grey background where the location icon is located since only half of the background color appear.

Here is my code:

#search-content {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    padding: 16px 0px 0px 16px;
}

#search-form {
    height: 42px;
    border: 1px solid #F2F2F2;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}

#search-location{
    height: 42px;
    border-radius: 5px;
    background-color: #F2F2F2;
}

#search-input {
    color: black;
    font-family: Raleway;
    font-size: 14px;
    border-width: 0;
    height: 30px;
    background: transparent;
}

#search-input:focus{
    outline: none;
}

#search-input::placeholder{
    color: black;
    font-family: Raleway;
    font-size: 14px;
    font-weight: bold;
}

#search-button {
    height: 42px;
    width: 80px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #0065FC;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}

#search-button:hover, #search-button:active{
    background-color: #0065fcb7;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/ 
                                     css?family=Raleway">
        <script src="https://kit.fontawesome.com/1f544e41e8.js" 
         crossorigin="anonymous"></script>



<div id="search-content">
  <form id="search-form">
    <i id="search-location" ></i>
    <input id="search-input" type="text" placeholder="Marseille, France"/>
    <button id="search-button" type="submit"> Search </button>
  </form>
</div>

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

CodePudding user response：

You can add some padding to the #search-location and control the border-radius corners individually so you have the 90degree corners on the inside

#search-content {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  padding: 16px 0px 0px 16px;
}

#search-form {
  height: 42px;
  border: 1px solid #F2F2F2;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}

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

#search-input {
  color: black;
  font-family: Raleway;
  font-size: 14px;
  border-width: 0;
  height: 30px;
  background: transparent;
}

#search-input:focus {
  outline: none;
}

#search-input::placeholder {
  color: black;
  font-family: Raleway;
  font-size: 14px;
  font-weight: bold;
}

#search-button {
  height: 42px;
  width: 80px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 42px;
  border-width: 0;
  background-color: #0065FC;
  border-radius: 0px 5px 5px 0px;
  cursor: pointer;
}

#search-button:hover,
#search-button:active {
  background-color: #0065fcb7;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/ 
                                     css?family=Raleway">
<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>



<div id="search-content">
  <form id="search-form">
    <i id="search-location" ></i>
    <input id="search-input" type="text" placeholder="Marseille, France" />
    <button id="search-button" type="submit"> Search </button>
  </form>
</div>