如何在附加图像时使引导程序的输入组中的边框保持一致？

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 设置为 none，但是尽管没有左边框，但仍存在圆角可见的问题。即使可以删除左边的角，我觉得一定有更好的方法......：/

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