Border radius not applied to form's submit button

yotube
0

Issue

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

enter image description here

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" class="fa-solid fa-location-dot"></i>
<input id="search-input" type="text" placeholder="Marseille, France" />
<button id="search-button" type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
</div>



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


Solution

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" class="fa-solid fa-location-dot"></i>
<input id="search-input" type="text" placeholder="Marseille, France" />
<button id="search-button" type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>





Answered By - AKX

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top