How to position loading animation inside input box

Question

I want to position my loading animation on the same line, inside my input box, to the right.

I tried :

<span>
    <input id="searchbox" placeholder="Enter Catalog # " type="text" />
    <img style="float:right;" id='loading' width="100px" src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/> 
</span>

I get :

I couldn't get it to show inside my input box. :(

Answer 1

Place both the input and the img inside a div and make that div look like a text box. I am currently on my phone so it might not be perfect but I think you get the point.

http://jsfiddle.net/soz8jq2x/