Positioning an image inside a text input box - css

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">
<img src ="microphone.png" id="voicebutton"/>
</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"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;">
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">
<image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;">
</div>

Answer 2

First of all, you can't have decimals in your pixels, like height: 37.5px;. This won't work. Also right: 395; does not work, because it doesn't specify what usage: pixels, ems, percentage? The input="text" is incorrect, it should be input type="text" as this can be e.g. email or radio.
That said, to achieve what you want, you can add a wrapper around your input field (like .box-wrapper) and give it a relative positioning with the same size as the input field. This will conclude to the example below.
.box-wrapper {
position: relative;
width: 600px;
height: 38px;
}
#searchbar{
border: 1px solid #dbdbdb;
display: block;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 38px;
position: relative;
}
#voicebutton{
width: 16px;
height: 23px;
position: absolute;
top: 0;
right: 0;
}
<div class="box-wrapper">
<input type="text" id="searchbar">
<img src ="http://dummyimage.com/50x50/ffff00/fff" id="voicebutton"/>
</div>

Answer 3

The input tag has no closing tag in HTML, you should remove the closing tag from your HTML code, additionally you can position the element over the input box changing your CSS to something like this (your CSS was almost right, the problem is the HTML) :
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:16px;
top:16px;
}

Answer 4

In HTML, the input tag has no end tag (as opposed to XHTML), so your a tag is outside of your input tag.