css - 我可以使用纯 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;
}