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

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 >
        <form id="form"> 
          <button><img  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>

CodePudding user response：

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 >
        <form id="form"> 
          <input type="search" id="query" name="q" placeholder="