2011-02-11 103 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;,你會清楚地看到一個文本框,另一個文本框和一個跨度。