Positioning an image inside a text input box

Question

I wanted to put an image inside a text input box and tried to position the image by nesting the image tag inside the input tag and using relative position for the input and absolute positioning for the image and setting the images 'right' and 'top' value to 0. I thought this would place the image on the right hand side of the text box. Instead it placed the image on the right hand side of the webpage. I'm unsure why this is, I found a solution by changing the 'top' and 'right' values to position it where I wanted but it just seemed like the first way should have worked, could anyone explain why it didn't?

This is the HTML for the text input and image.

<input = "text" id="searchbar"> 

            <a href="#voice"> <img src ="microphone.png" id="voicebutton"/> </a>

</input>

This is the CSS I though would work.

#searchbar{
    border: 0.6px solid #dbdbdb;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:37.5px;
    position:relative;
}

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:0;
    top:0;
}

This is the CSS that worked.

#searchbar{
    border: 0.6px solid #dbdbdb;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:37.5px;
    position:relative;
}

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:395;
    top:207;
}

Answer 1

Three ways to do it:

1- Use the properties background-size and background-position to set your background-image inside the input-box. Example:

input[type=text] {
  box-sizing: border-box;
  padding-left: 10px;  
  font-size: 40px;
  width:85%;
  height:55px;
  border: 2px solid black;
  background-color: floralwhite;
  background-image: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: 99% 100%;
}

input[type=text]:focus {
  background-color: pink;
  outline: none;
}

<input type="text" placeholder="write here" id="searchbar">

2- Use a negative margin to place the image over it (you can set the image to be a link). Example:

input[type=text] {
      box-sizing: border-box;
      padding-left: 10px;  
      font-size: 40px;
      width:85%;
      height:55px;
      border: 2px solid black;
      background-color: honeydew;  
      vertical-align: top;
    }

input[type=text]:focus {
      background-color: skyblue;
      outline: none;
    }

img {
margin-top: 3px;
margin-left: -55px;  
}

<input type="text" placeholder="write here" id="searchbar"><a href="#"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;"></a>

3- Let both inputbox and image inside a container; set the container position: relative and the image position: absolute (you can set the image to be a link). Example:

input[type=text] {
      box-sizing: border-box;
      padding-left: 10px;  
      font-size: 40px;
      width:100%;
      height:55px;
      border: 2px solid black;
      background-color: MintCream;  
      vertical-align: top;
    }

input[type=text]:focus {
      background-color: LightGreen;
      outline: none;
    }

img {
position: absolute;
top: 3px;
right: 5px;  
}

#container {
  position: relative;
  width:85%;
}

<div id="container">
<input type="text" placeholder="write here" id="searchbar">
<a href="#"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;"></a>
</div>