How to create a search input

[fangjunai]

How to create a search input?

Reduced test cases

		<div class="input-group input-group-lg" style="width:500px">
			<span class="input-group-text">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
					<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
				</svg>
			</span>
			<input type="text" class="form-control" placeholder="Search docs">
		</div>

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

Bootstrap v5.3.3

[coliff]

Instead of using an input group, I'd recommend setting the search icon as a background-image on the input itself and set it to display on the left and add some left-padding so the text input appears to begin to the left of the search icon.

<style>
  .form-control-search {
    max-width: 300px;
    background-color: transparent !important;
    background-image: url(https://cdn.jsdelivr.net/npm/[email protected]/icons/search.svg);
    background-repeat: no-repeat;
    background-position: 9px;
    padding-left: 34px;
  }
</style>

<div class="mx-auto col-11 mt-5">
  <input class="form-control form-control-search" type="search" placeholder="Search docs">
</div>

Quick Codepen demo here:
https://codepen.io/coliff/pen/NPKxaom

[fangjunai]

Thank you