Placement of unedited, static text inside the input field [type = text] (screenshots)

Question

I am developing an application in which users can select the URL of their profile, ala facebook.com/name. Everything went fine except that I was having style issues adding static typing to the input to convey a message about your own URL.

Here I want the input to look when the user visits the page:

And here is what I want it to look like when they add their own contribution:

Half of this problem is simple, I can just install a large left-handed add-on to the input, make it display freezing effects no matter where the mouse is, and place the input accordingly. But the problem is that the text is entered into the input line without violating the style around it (and does not allow the user to select static text, so even clicking on the static text will “focus” the input field behind it).

I would prefer to use pure HTML / CSS, but I could use Javascript if necessary.

Here, where I am now, the goal is to bring the text "www.website.com" to the input field without violating the style of the text field: http://jsfiddle.net/rUkS8/1/

Thank you and sorry for such a long description!

Answer 1

Why not get around the problem and just have this static text outside the input?

www.website.com/<input type="text" name="url" /> 

This degrades quality in old / brain dead browsers, works when javascript is disabled, and makes it obvious where the separate input is.

Answer 2

If you use the label and the for attribute, it handles the click events for you:

 <div style="border:1px solid #000;"> <label for="textinput" style="cursor:text;">asdf</label> <input type="text" id="textinput"> </div> 

If you click on the shortcut, it will direct focus to the input. Room cursor:text; adds to the effect. All you have to do is play games with size and border, and you are all set.