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

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

使用按钮上的边框实用程序...&nbsp; &nbsp;<div class="input-group" style="width: 10rem;">&nbsp; &nbsp; &nbsp; &nbsp; <input type="search" placeholder="Search..." aria-describedby="button-addon5" class="form-control">&nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group-append">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="button-addon5" type="submit" class="btn border-left-0 border" style="background-color: White;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;</div>演示： https: //codeply.com/p/wLgphISgj2