How can I make an search form like this? - html

Question

I just wonder is here is any easy way to make search button like this:There is a search form I want to make
For now I have smth like this:This is what I have for now
And there is HTML and CSS:
.path1{
max-width: 18px;
max-height: 18px;
}
.search-button{
border-bottom: #0A093D;
width: 30%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
<div class="search-button">
<form id="form">
<button><img class="path1" src="C:\Users\przem\Projekty\strona-task\img\1024px-Search_Icon.svg.png"></img></button>
<input type="search" id="query" name="q" placeholder="Search...">
</form>
</div>

Answer 1

you can also put a unicode inside the placeholder.
.path1{
max-width: 18px;
max-height: 18px;
}
.search-button{
border-bottom: #0A093D;
width: 30%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
<div class="search-button">
<form id="form">
<input type="search" id="query" name="q" placeholder=" 🔍︎ Search...">
</form>
</div>

Answer 2

Here you go...
input {
border: none;
}
.search-button {
width: 250px;
border-bottom: 2px solid lightgrey;
padding-bottom: 10px;
}
<div class="search-button">
<form id="form">
<button><img class="path1" src="C:\Users\przem\Projekty\strona-task\img\1024px-Search_Icon.svg.png"></button>
<input type="search" id="query" name="q" placeholder="Search...">
</form>
</div>