How do I get my search Icon Into a search bar in html and css

[HenryMiles3]

Question:
How do I get my search button inside of my search bar so it looks like the what I would like to happen image.
What I would like to happen:

Whats Happening:

---

---

Thanks to any help provided!

[NateDhaliwal]

@HenryMiles3 Maybe a <label> tag in the form element?

[HenryMiles3]

Sorry but what element would I put those tags around?

[OmegaOrbitals]

Try using flexbox.

Add display: flex; flex-direction: row to the search bar, which will align all items inside the search bar horizontally.

Then add margin-right: auto; to the search button to push the button to the left of the search bar.

Hope this helped :D

[CodingCactus]

Hi, yeah you can’t put things directly inside of inputs, so what you instead need to do is make another element look like an input, and within that have the 2 elements of your button and actual input.

Something like this:
https://search-with-icon-httpsaskreplitcomt-59043.codingcactus.repl.co

<form>
  <button>🔍</button>
  <input />
</form>

form {
  border: 1px solid grey;
  border-radius: 100px;
  padding: 8px 10px;
  display: flex;
  gap: 5px;
  width: 500px;
  margin: 0 auto;
}

button {
  background-color: transparent;
  border: none;
  margin: 0;
  cursor: pointer;
}

input {
  border: none;
  outline: none;
  width: 100%;
}

[HenryMiles3]

Thanks for this! It really helped and worked.