我可以将不可编辑的文本放入带有纯CSS的表单字段中吗？

Question

我正在尝试创建一个看起来像

的表单输入字段

其中domain.com/username/是不可编辑的文本（不会作为表单数据提交），但用户可以在其末尾键入所需内容。我知道我可以使用Javascript，但是有一个干净的，非hacky方式单独使用CSS吗？当然，用户名的大小会有所不同，因此可编辑的文本需要从正确的位置开始。

Answer 1

如果您不需要默认的浏览器样式输入并且可以编辑HTML，则可以创建自定义字段，如http://jsfiddle.net/Aprillion/aJQ6M/：

HTML：

<label class="looks_like_input">
  domain.com/username/
  <input type="text" value="all-about-kitties">
</label>

CSS：

.looks_like_input {
    border: 1px inset;
    font-weight: bold;
}
.looks_like_input input {
    border: 0;
    font-weight: normal;
}

Answer 2

为什么不直接标记domain.com/username/然后输入？

把它放在你的CSS中

#page{float:left;}
#box{border:1px inset; height:30px;}
.text_field{border:none;}

这是HTML格式

<div id="page">
<div id="box">
<input class="text_field" style="float:right; min-width:50px;width:50px;max-width:130px;text-align:left;" size="5" onkeyup="this.size=this.value.length+1;this.style.width='auto'" type="text">
<label class="prefix_for_input" style="float:right;">http://millerpath.tumblr.com/</label>
</div>
</div>

你可能想在这里解决一些问题。