Image in inputtext with border in css

Question

IF you see the below picture you can see that the input text consists of image as background.But I want to keep a line in between the text and image.Either by applying image border...or any other trick.Im unable to found exact example or tutorial or trick.Because I applying image as background.So Im unable to apply border...

background: url("~/application/modules/User/externals/images/mail.png") no-repeat scroll 10px 11px #FFFFFF; background-size: 20px 20px;

Answer 1

The solution for the icons in inputs is using a label element with for="" attribute

the for attribute needs to have the id of the input as a value so when you click this element the input get focused

Check this fiddle