CODEWITHSUNDEEP
htmlcss
Jason Kelly
Jason Kelly

Reputation: 2655

Placing an image to the right, inside an input box

How can I get my double down arrow image positioned to the right inside my input box and It must also be clickable.

Here is my image: enter image description here

And Here is a picture of the desired result:enter image description here

HTML Code:

<!DOCTYPE html>    
<html>
  <head></head>
  <body>
    <input type="text" style="border: 1px solid #000;">
    <img src="double_arrow.png" style="width: 19px; height: 18px;">
  </body>
</html>

Upvotes: 2

Views: 2103

Answers (1)

Matt Pileggi
Matt Pileggi

Reputation: 7196

Wrap them both in an outer container that is positioned relatively. Then set the image to be absolute position and anchored to the right

<div class="combo">
  <input type="text">
  <img class="trigger">
</div>

.combo { position: relative; }
.combo .trigger { position: absolute; right: 0; top: 1px }

Something to that effect ought to work

Upvotes: 5

Related Questions