我正在开发一个应用程序,用户可以在其中选择他们的个人资料的URL,ala facebook.com/name.一切都很顺利,除了我在输入中添加一组静态文本的样式问题,以帮助传达拥有自己的URL的消息.

这是我希望输入在用户访问页面时的样子：

这就是我希望它们在添加自己的输入时的样子：
 

这个问题的一半很简单,我可以在输入中设置一个大的左边距,让它显示悬停效果,无论鼠标在哪里,并相应地放置输入.但问题是将文本放入输入行而不破坏其周围的样式(并阻止用户能够选择静态文本,因此即使单击静态文本也会“将焦点”输入其后面的输入字段).

我真的更喜欢使用纯HTML / CSS,但如果必须的话可以使用Javascript.

这就是我现在的位置,目标是将“www.website.com”文本带入输入字段,而不会破坏textarea的样式：http://jsfiddle.net/rUkS8/1/

谢谢,抱歉这么长的描述！

最佳答案 为什么不绕过问题并简单地在输入之外使用静态文本？

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

这在旧的/脑死亡的浏览器中很好地降级,在禁用javascript时起作用,并使输入的单独位置变得明显.