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

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:
Screenshot 2023-08-30 9.13.12 AM

Thanks to any help provided!

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

1 Like

Sorry but what element would I put those tags around?

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


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:

  <input />
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%;

Thanks for this! It really helped and worked.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.