带有css边框的inputtext中的图像

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;

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

In my guessing you can do it by using border-right:1px solid #333 like,

<div>
    <span style="border-right:1px solid #333"><img src="path-to-image" alt=""/></span>
    <input type="text" />
</div>

Alternatively, you can add a separator or border in you images like,

CSS

img{
    border-right:1px solid #333;
}

you could do

input { background-image: url.jpg; box-shadow: 0 4px 0 4px black; }

this should create a solid 4px black right hand side border. Adjust accordingly

you can place image in span and set its right border only ... you can change the span height according to wish, the tag containing span should be applied with the property of overflow: hidden; in order to work in bit proper way, or simply you can add line to your image.