将不可编辑的静态文本放入输入[type=text]字段中（屏幕截图）
Wal*_*ker 5 html css input styling
我正在开发一个应用程序，用户可以在其中选择其个人资料的 URL，ala facebook.com/name。一切都很顺利，除了我在输入中添加一组静态文本时遇到样式问题，以帮助传达拥有自己的 URL 的消息。
这是我希望用户访问页面时输入的样子：
这是我希望他们添加自己的输入时的样子：
这个问题的一半很简单，我可以为输入设置一个大的左填充，让它显示悬停效果，无论鼠标在哪里，并相应地放置输入。但问题是在不破坏文本周围样式的情况下将文本放入输入行（并阻止用户选择静态文本，因此即使单击静态文本也会“聚焦”其后面的输入字段）。
我真的更喜欢使用纯 HTML/CSS，但如果必须的话也可以使用 Javascript。
这就是我现在所在的位置，目标是将“www.website.com”文本带入输入字段，而不破坏要遵循的文本区域的样式： http: //jsfiddle.net/rUkS8/1/
感谢并抱歉这么长的描述！
为什么不绕过这个问题并简单地将静态文本放在输入之外呢？
www.website.com/<input type="text" name="url" />
这在较旧的/脑死亡的浏览器中性能下降得很好，在禁用 javascript 时有效，并且使单独的输入在哪里变得显而易见。
- 这也是我的第一个想法。我建议使用带边框的 div 和不带任何样式的输入来实现所需的样式。 (3认同)