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?
<input type="text" id="name"/>
In the picture is an image which is inside the text field email address, which is what I want. How do you do this?
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;
.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">