我正在尝试重现stackoverflow的输入框行为，它们将span文本放在输入框上。看起来文本实际上在输入框内，但实际上只是一个精确定位的跨度。当用户在字段中键入文本时，它们会隐藏跨度。要查看操作中的行为，请按“提问”，然后查看“标题”输入框。文字说：“你的编程问题是什么？具体”。
我正在为电子商务结帐页面创建此功能，因此会有多个不同宽度和位置的输入框。
作为CSS新手，有没有办法创建输入框，然后以某种方式将跨度附加到输入字段的左侧和垂直中心？我想我可以通过单独定位每个，所以我希望可以开发一个类，它会自动将一个跨度附加到先前定义的输入框。有没有人有一个优雅的方式来做到这一点没有自定义每个？
答案 0 :(得分：1)
我刚用jQuery plugin做了这个。
我使用JavaScript自动执行此操作，但适用相同的规则。
答案 1 :(得分：0)
如果你仔细观察，它不是定位的跨度。还有另一个隐藏的input。
<input type="text" tabindex="100" class="actual-edit-overlay" value="" style=" background-color: white; color: black; opacity: 1; width: 610px; height: 15px; " disabled="">
<input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field edit-field-overlayed" value="" style="z-index: 1; position: relative; opacity: 0.3; ">
<span class="edit-field-overlay">what's your programming question? be specific.</span>
如果您使用firebug进行检查并设置关闭display:none;，您将清楚地看到一个文本框，另一个文本框和一个跨度。