我正在尝试制作一个看起来像的表单输入字段
其中 domain.com/username/ 是不可编辑的文本(不会作为表单数据提交),但用户可以在其末尾键入他们想要的内容。我知道我可以为此使用 Javascript,但有没有一种干净、非 hacky 的方式来单独使用 CSS 呢?当然,用户名的大小会有所不同,因此可编辑文本需要从正确的位置开始。
我正在尝试制作一个看起来像的表单输入字段
其中 domain.com/username/ 是不可编辑的文本(不会作为表单数据提交),但用户可以在其末尾键入他们想要的内容。我知道我可以为此使用 Javascript,但有没有一种干净、非 hacky 的方式来单独使用 CSS 呢?当然,用户名的大小会有所不同,因此可编辑文本需要从正确的位置开始。
如果您不需要默认的浏览器样式输入并且可以编辑 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;
}
为什么不只是标记 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>
你可能想在这里解决一些问题。