-2

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>
Arkan
  • 3
  • 2
  • Does this answer your question? [Put icon inside input element in a form](https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form) – Reza Saadati Oct 18 '22 at 08:38

2 Answers2

0

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>
Crystal
  • 1,845
  • 2
  • 4
  • 16
-1

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>
Rok Benko
  • 14,265
  • 2
  • 24
  • 49