尝试使用CSS在输入框上定位跨度

时间:2011-02-11 00:25:26

标签: css

我正在尝试重现stackoverflow的输入框行为,它们将span文本放在输入框上。看起来文本实际上在输入框内,但实际上只是一个精确定位的跨度。当用户在字段中键入文本时,它们会隐藏跨度。要查看操作中的行为,请按“提问”,然后查看“标题”输入框。文字说:“你的编程问题是什么?具体”。

我正在为电子商务结帐页面创建此功能,因此会有多个不同宽度和位置的输入框。

作为CSS新手,有没有办法创建输入框,然后以某种方式将跨度附加到输入字段的左侧和垂直中心?我想我可以通过单独定位每个,所以我希望可以开发一个类,它会自动将一个跨度附加到先前定义的输入框。有没有人有一个优雅的方式来做到这一点没有自定义每个?

2 个答案:

答案 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;,您将清楚地看到一个文本框,另一个文本框和一个跨度。