Link inside the input tag

Question

How to display a href and img src inside an input field (text field). ex: I want to display this inside a text box ( <input id=link )

 <a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a> 

early.

Answer 1

Based on the comments, I would suggest that you want to enter an input field that has this HTML as the default text. You must use character codes for quotes and less / more characters.

 <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 HTML site to see how they do it.)

Answer 2

You have two options.

• Place the image as input background, but it will not be available.
• Absolutely position the element above the 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 will need to play with the position and values ​​depending on the input size, image size and overall placement, but this should do what you want.

Answer 3

As mentioned in the comments, you cannot literally put the link in the input text box (although you can mimic one using JavaScript).

For the background image, use CSS background-image .