CODEWITHSUNDEEP
htmlcss
now he who must not be named.
now he who must not be named.

Reputation: 9398

How to insert a image next to an input field - HTML?

I am trying to insert an image next to an input box. Here's what I am doing:

http://jsfiddle.net/a4aME/2307/

Basically,

.iconCamera {
  background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
  width: 50px;
  height: 50px;
}
<div class="A" style="display:inline-block">
  <div>
    <input type="text" placeholder="Product Key">
    <div class="iconCamera"></div>
  </div>
</div>

Since, I've given the inline-block, the two components should be displayed side by side - in one line right ?

But currently there are stacked one below other. Any pointers on what needs to be done on this case?

Upvotes: 1

Views: 4081

Answers (1)

Vahe
Vahe

Reputation: 1841

Use display: inline-block in the css specification.

http://jsfiddle.net/a4aME/2310/

.iconCamera {
    background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
    width:50px;
    height:50px;
    display: inline-block;
}

Upvotes: 1

Related Questions