skip to Main Content

I’m trying to replicate this:

What I’m trying to replicate

If you can’t see it, both the icon on the left and the textbox have a light gray border, and the button to submit (Rechercher) is attached to the textbox.

Here’s what I managed to do

For clarity reasons I changed the border colour.
Here you can see that the submit button isn’t part of the 2 other items, and when I implement it into the Flexbox container here’s what happens:

With display: flex

How can I make it more like the model I’m trying to replicate?

.barre-rechercher {
  display: flex;
  flex-direction: row;
  margin: 35px 0 35px 0;
}

.fa-location-dot {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid red;
  border-radius: 10px 0 0 10px;
  background-color: #F2F2F2;
}

input[type="text"] {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 49px;
  border: 1px solid red;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

form>input[type="submit"] {
  color: white;
  height: 49px;
  border: 1px solid var(--main-color);
  border-radius: 0 15px 15px 0;
  background-color: var(--main-color);
}
<div class="barre-rechercher">
  <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;"></i>
  <form method="get" action="">
    <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
    <input type="submit" value="Rechercher">
  </form>
</div>

2

Answers


  1. Add these two rules:

    .barre-rechercher form {
      display: contents;
    }
    input {
      box-sizing: border-box;
    }
    

    The first one to make the children of the form be flex-children of the .barre-rechercher container, the second to make sure the height of both input elements is identical regardless of borders and paddings.

    I also added border-right: none; to the text input field to attach the submit button directly to it without a border.

    .barre-rechercher {
      display: flex;
      flex-direction: row;
      margin: 35px 0 35px 0;
    }
    
    .barre-rechercher form {
      display: contents;
    }
    .fa-location-dot {
      display: flex;
      align-items: center;
      padding: 15px;
      border: 1px solid red;
      border-radius: 10px 0 0 10px;
      background-color: #F2F2F2;
    }
    input {
      box-sizing: border-box;
    }
    input[type="text"] {
      display: flex;
      align-items: center;
      gap: 24px;
      height: 49px;
      border: 1px solid red;
      text-align: center;
      font-weight: 700;
      font-size: 18px;
      border-right: none;
    }
    
    form>input[type="submit"] {
      color: white;
      height: 49px;
      border: 1px solid blue;
      border-radius: 0 15px 15px 0;
      background-color: blue;
    }
    <div class="barre-rechercher">
      <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;"></i>
      <form method="get" action="">
        <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
        <input type="submit" value="Rechercher">
      </form>
    </div>
    Login or Signup to reply.
  2. Instead of a fixed height, I had set a min-height on the container. Now, it will always be responsive no matter how many contents are there.

    .barre-rechercher {
        display: flex;
        flex-direction: row;
        margin: 35px 0 35px 0;
        /* added code */
        min-height: 49px;
    }
    
    .fa-location-dot {
        display: flex;
        align-items: center;
        padding: 15px;
        border: 1px solid #f2f2f2;
        border-radius: 10px 0 0 10px;
        background-color: #F2F2F2;
    }
    
    input[type="text"] {
        display: flex;
        align-items: center;
        gap: 24px;
        /* height: 49px; */
        border: 1px solid #f2f2f2;
        text-align: center;
        font-weight: 700;
        font-size: 18px;            
    }
    
    /* added code */
    form{
        display: flex;
    }
    
    form > input[type="submit"] {
        color: white;
        /* height: 49px; */
        border: 1px solid #6666ff;
        border-radius: 0 15px 15px 0;
        background-color: #6666ff;
        cursor: pointer;
    }
    <div class="barre-rechercher">
        <i class="fa-solid fa-location-dot fa-lg" style="color: #000000;">More <br> contents <br> can't <br> break <br> this one</i>
        <form method="get" action="">
            <input type="text" id="ville" name="ville" required placeholder="Marseille, France">
            <input type="submit" value="Rechercher">
        </form>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search