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;
}