Add responsive image inside a centered form

Question

#search-box {
  position: relative;
  width: 100%;
  height: 10rem;
}

#box {
  box-sizing: border-box;
  border: 1px solid rgb(0, 0, 0, 0.2);
  border-radius: 25px;
  width: 20rem;
  height: 2.8rem;
}

#mag-container {
  position: absolute;
  top: 1rem;
  left: 1.3rem;
}

#mag {
  opacity: 50%;
  width: 1rem;
}

<div id="search-box">
  <input type="text" name="search" class="search-tool" id="box" />
  <span id="mag-container">
        <img
          src="https://res.cloudinary.com/permalik/image/upload/q_50/v1609564792/magnifying-glass.svg"
          alt="magnifying glass"
          class="search-tool"
          id="mag"
        />
      </span>
</div>

I am trying to position an icon inside a form (while the form itself is centered.)

Using a background image, some form of flex, transform or bootstrap seems to produce the desired result... but I want to know if there is a way to pull this off with certain nesting and positioning (alone.)

I've checked (Put icon inside input element in a form -- https://teamtreehouse.com/community/how-do-i-put-icons-inside-of-input-fields -- How can I center an absolutely positioned element in a div? -- and more.)

The answers I have found didn't exactly solve my issue.

Though I can keep using a background image, I'm simply curious if this is achievable.

Thanks for your time and effort.


     <div id="search-box">
      <input type="text" name="search" class="search-tool" id="box" />
      <span id="mag-container">
        <img
          src="https://res.cloudinary.com/permalik/image/upload/q_50/v1609564792/magnifying-glass.svg"
          alt="magnifying glass"
          class="search-tool"
          id="mag"
        />
      </span>
    </div>


#search-box {
  position: relative;
  width: 100%;
  height: 10rem;
}

#box {
  box-sizing: border-box;
  border: 1px solid rgb(0, 0, 0, 0.2);
  border-radius: 25px;
  width: 20rem;
  height: 2.8rem;
}

#mag-container {
  position: absolute;
  top: 1rem;
  left: 1.3rem;
}

#mag {
  opacity: 50%;
  width: 1rem;
}

Amirhoseinh73 · Accepted Answer · 2021-01-02T11:00:45.413

you must make a div relative for form and absolute icon; add custom width to div; then add display: block and margin: auto to form for make it centered on axis x.

#search-box {
  position: relative;
  width: 100%;
  height: 10rem;
}

.centered-form{
  position: relative;
  display: block;
  margin: auto;
  width: 20rem;
  height: 2.8rem;
}

#box {
  box-sizing: border-box;
  border: 1px solid rgb(0, 0, 0, 0.2);
  border-radius: 25px;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 45px;
}

#mag-container {
  position: absolute;
  top: 1rem;
  left: 1.3rem;
  background: transparent;
  border: 0;
  padding: 0;
  outline: 0;
  z-index: 1;
  cursor: pointer;
}

#mag {
  opacity: 50%;
  width: 1rem;
}

<div id="search-box">
<div class="centered-form">
  <input type="text" name="search" class="search-tool" id="box" />
  <button type="button" id="mag-container">
        <img
          src="https://res.cloudinary.com/permalik/image/upload/q_50/v1609564792/magnifying-glass.svg"
          alt="magnifying glass"
          class="search-tool"
          id="mag"
        />
      </button>
      </div>
</div>

Add responsive image inside a centered form

1 Answers1