Home/ Questions/Q 6737447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:15:00+00:00

I am developing an app where users can choose the URL of their profile,

  • 0

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:
enter image description here

And here’s what I want it to look like when they add their own input:
enter image description here

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0