How to add icon or image inside an input field element ?

How can I add icon or image inside an input field element ? For example an email icon, user icon etc.

Hi,

The best and easiest way how to "add" image into input field, is to display it as a background with some additional CSS parameters. For example, if you need to have your image on the right side and avoid text overlapping, you can use this solution:

<style>

.inputfield {
border-color: #DDDDDD;
border-style: solid;
border-width: 1px;
font-size: 15px;
line-height: 15px;
width: 200px;
padding: 10px 45px 10px 10px;
outline: none;
border-radius: 4px;
background: #FFFFFF url(image.png) right no-repeat;
}

</style>

<input id="email" class="inputfield" />
This solution allows to change or remove the image if needed, using JavaScript:

<a href="javascript:void(0);" onClick="javascript: document.getElementById('email').style.background='#FFFFFF url(new_image.png) right no-repeat'; " >Change background image</a>