I am trying to make a search box in a navbar and I get this effect:
So my problem is that I can't manage to make the border consistent - I want the icon to have the same border as the "Search..." box with no border in between them.
The code for it looks like this:
<div class="input-group" style="width: 10rem;">
<input type="search" placeholder="Search..." aria-describedby="button-addon5" class="form-control">
<div class="input-group-append">
<button id="button-addon5" type="submit" class="btn" style="background-color: White;">
<svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color: rgb(230,0,0);">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z" clip-rule="evenodd"/>
</svg>
</button>
</div>
The closest I got to solving it is by looking up bootstrap's css and copying the border properties to the button element and then setting the border-left to none, but then there were problems with rounder corners being visible despite no left border. Even if it would be possible to delete just left corners, I feel like there must be a better way... :/