Place an image inside a text field

Question

I have an HTML input field like this. I would like to place an image inside the textbox on the right side. Can someone help me out with its CSS for that?

Answer 1

The answers above didn't replicate the format shown in the questioners image, or provide any explanation. This is a solution using background images.

Explanation of the background image syntax.

background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;

• Location of image: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png')
• Show image once: no-repeat
• Distance from left: 97.25%
• Distance from top: 10px
• Background color: white

.bg-email-icon {
  background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;
  padding-left: 5px;
  padding-right: 50px;
  width: 255px;
  height: 30px;
  border: 1px gray solid;
  border-radius: 5px 5px 0px 0px;
}

.bg-lock-icon {
  background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/lock-icon.png') no-repeat 96.75% 10px white;
  padding-left: 5px;
  padding-right: 50px;
  width: 255px;
  height: 30px;
  border: 1px gray solid;
  border-top-width: 0px;
  border-radius: 0px 0px 5px 5px;
}

<input name="exampleEmail" class="bg-email-icon" placeholder="Email" type="email">
<input name="examplePassword" class="bg-lock-icon" placeholder="Password" type="password">

Answer 2

A small answer: you can do this by setting as a background image of input field.

Answer 3

You can add class to your input

<input type="text" id="name" class="inputImage" />

and then background image to class in css

.inputImage
{
background:#FFFFFF url('img.jpg') no-repeat top right;
}

Answer 4

You need to add class like this:

CSS:

.bgInput {
  background: url(path of your image.jpg) top right no-repeat;
}

HTML:

<input type="text" class="bgInput" id="name"/>