Putting uneditable, static text inside of an input[type=text] field (screenshots)

Question

I am developing an app where users can choose the URL of their profile, ala facebook.com/name. Everything worked out fine, except I'm having styling issues adding a static set of text inside the input, to help convey the message of having your own URL.

Here's what I want the input to look like when the user is visiting the page:

And here's what I want it to look like when they add their own input:

Half of this problem is easy, I can just set a large left-padding to the input, get it to display hover effects regardless of where the mouse is and place the input accordingly. But the issue is getting the text into the input line without breaking the styling around it (and preventing the user from being able to select the static text, so that even clicking the static text will "focus" the input field behind it).

I'd really prefer to use pure HTML/CSS, but could use Javascript if it's a must.

Here's where I am now, the goal is to bring the "www.website.com" text into the input field without breaking the styling of the textarea to follow: http://jsfiddle.net/rUkS8/1/

Thanks and sorry for such a long description!

Solution

Why not bypass the problem and simply have that static text outside of the input?

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

This degrades nicely in older/brain dead browsers, works when javascript is disabled, and makes it obvious where the seperate of inputs is.