Link inside of input tag

Question

How to display a a href and a img src inside a input box (text box). ex: i want to display this inside a text box (

Answer 1

Based on the comments, I would guess that you want an input field that has that HTML code as the default text. You must use character reference codes for quotes and less/greater than signs.

<input type="text" value="&lt;a href=&quot;http://www.mysite.com/link&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://www.mysite.com/img.jpg&quot; border=&quot;0&quot; alt=&quot;mysite.com&quot;&gt;&lt;/a&gt;" />

(By the way, you mentioned "like in Photobucket" -- you can just look at the site's HTML to see how they do it.)

Answer 2

You have two options.

1. Place the image as a background of the input, but this won't be clickable.
2. Absolutely position the element over an input.

1:

.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; }

2:

HTML

<div class="inputContainer">
    <input class="myInput" type="text" name="myInput" id="myInput" />
    <a href="#" class="inputImg"><img src="#" /></a>
</div>

CSS

.inputContainer { position:relative; }
.myInput { padding-left:25px; /* This will move the text from under the image */ } 
.inputImg { left:5px; position:absolute; top:5px; z-index:5; }

You'll need to play with the position and values depending on your input size, image size and general placement, but that should do what you want.

Answer 3

As comments mention, you can't literally put a link in an input text box (although you could simulate one with JavaScript).

For the background image, use CSS background-image.