I’m trying to replicate this:
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.
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:
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
Add these two rules:
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 bothinput
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.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.