I am working on creating a search box within a navbar and encountering an issue with the border style:
https://i.sstatic.net/DCMpX.png
My challenge lies in achieving consistent borders - I aim for the icon to have the same border as the "Search..." box without any border gap between them.
The code snippet is as follows:
<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>
I experimented by referencing Bootstrap's CSS for border properties and applying them to the button element, setting the left border to none. However, this approach resulted in visible round corners despite removing the left border. I believe there must be a more effective solution... :/