Limiting utilized area within textbox using CSS - css

Question

I have a small image placed within the right side of my text box and I am trying to prevent my text from running behind that image. However, I do not want to limit the amount of characters by doing this. Any suggestions?
<div id="searchContainer">
<!--Search Bar-->
<input id="searchBar" type="text" placeholder="Type here to search" onfocus="placeholder = ' '"/>
<!--Microphone-->
<img id="mic" src="*Super long URL*"/>
</div>
/*Search Bar*/
#searchBar {
opacity: 0.6;
position: relative;
display: block;
height: 24px;
font-size: 16px;
font-family: Arial, sans-serif;
width: 550px;
}

Answer 1

What people typically do is put the text input, and image inside of a container. They remove the border of the input so it appears to be a white input box. They stylize the container with a border and such to make it look like THAT is the input. Then they put the (in your case) microphone image floated to the right, and add a margin right to the input. so the text does not hide behind the image.
Here is the basic idea: http://codepen.io/anon/pen/pJdMJB
HTML:
<div id="searchContainer">
<img src="http://i.imgur.com/w5j4E5O.png"/>
<input id="searchBar" type="text"/>
</div>
CSS:
#searchBar {
opacity: 0.6;
position: relative;
display: block;
height: 24px;
font-size: 16px;
font-family: Arial, sans-serif;
width: 500px;
border:none;
}
#searchContainer{
border:1px solid #ddd;
width:520px;
}
img{
width:20px;
height:20px;
float:right;
}