Я пытаюсь создать окно поиска в навигационной панели и получаю следующий эффект:
Так что моя проблема в том, что я не могу удалось сделать границу согласованной - я хочу, чтобы значок имел ту же границу, что и поле «Поиск ...», без границы между ними.
Код для этого выглядит следующим образом:
<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 для элемента button, а затем установив значение border-left равным none, но затем возникли проблемы с отображением углов округления, несмотря на отсутствие левой границы. Даже если бы можно было удалить только левые углы, я чувствую, что должен быть лучший способ ...: /