html - 附加图像时如何使边框在 Bootstrap 的输入组中保持一致？

Question

我想在导航栏中创建一个搜索框，我得到了这样的效果:

所以我的问题是我无法使边框保持一致 - 我希望图标与“搜索...”框具有相同的边框，并且它们之间没有边框。

它的代码如下所示:

<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>

我最接近解决它的方法是查找 bootstrap 的 css 并将边框属性复制到按钮元素，然后将 border-left 设置为无，但是尽管没有左边框，但圆 Angular 还是可见的问题。即使可以删除左边的 Angular ，我觉得一定有更好的方法......:/

Answer 1

在按钮上使用边框工具...

   <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 border-left-0 border" 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>
   </div>

演示:https://codeply.com/p/wLgphISgj2