2011-02-11 102 views
1

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

我为电子商务结帐页面创建了这个,所以会有多个不同宽度和位置的输入框。

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

+0

你想要JavaScript代码吗?任何库,如jQuery可用? – alex 2011-02-11 00:34:37

回答

1

我刚刚用jQuery plugin做了这个。

我用JavaScript来自动执行此操作,但同样的规则适用。

+0

听起来不错。我只是抓住了代码并试图运行它。我尝试使用$('#firstname').inputLabel(“First Name”)执行它。但它不起作用。呼叫约定是什么? – user77413 2011-02-11 00:45:23

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> 

如果您检查与萤火虫,并设置关闭display:none;,你会清楚地看到一个文本框,另一个文本框和一个跨度。