如何讓標籤顯示在輸入欄內？

看着這個網站：http://www.gofundme.com/sign-up/他們有一個很好的'金額'輸入，您可以在其中更改$£€符號。我已經向我解釋過（謝謝你們），他們如何用javascript來解決這個問題。顯然它會改變輸入的標籤。如何讓標籤顯示在輸入欄內？

所以我的問題是，他們如何獲得他們的符號（這是字段標籤）內的輸入字段？

來源

2011-07-07 Crazy Sarah

這是不是裏面輸入。它在一個div裏面也有輸入 – Jawad

– Jawad

他們在你給出的一面作爲例子的方法是將標籤和輸入封裝在一個div中，將div的樣式設置爲輸入字段。標籤和輸入字段在該div內簡單地坐在一起。

另外，你也可以絕對地定位標籤，並在輸入字段中添加一個填充左邊，就像這樣你不需要假的div。

我給了第二個選項的例子：

HTML: 
<form> 
    <div class="holder"> 
     <label> 
      <img src="yourimagesrc" width="20" height="20" alt="Your Image" /> 
     </label> 
     <input type="text" ... /> 
    </div> 
</form> 

CSS: 
.holder { 
    position: relative; 
} 

.holder label { 
    position: absolute; 
    left: 2px; 
    top: 2px; 
    width: 20px; 
    height: 20px; 
} 

.holder input { 
    padding: 2px 2px 2px 25px; 
}

當然的像素值只是爲了舉例的緣故，需要更換與給定的情況下適當的值。另外，不是在標籤內添加img，而是直接將背景圖像分配給標籤。

總是有很多不同的方式來處理與CSS的情況。

來源

2011-07-07 15:57:17 ximi

嘿，那裏，謝謝你的快速回答。我喜歡你的第二個建議，但我不太確定我絕對的位置 - 我會去閱讀並找出:) –

而且你絕對會將標籤「RELATIVE」定位到？你仍然需要一個div！ – Jawad

這取決於各自的文檔結構。你可能需要一個額外的div，但這不是給定的。他還可以根據周圍的表單或字段集等絕對定位標籤。 – ximi

他們有一個普通的<div>風格看起來像一個文本框和一個<label>後面跟着一個無邊框<input>裏面。

你可以看到它是如何工作的使用Firebug。

來源

2011-07-07 15:57:28 SLaks

嗨，感謝您的建議。我確實有螢火蟲，但我很慚愧地說我發現這一切都有點混亂。我是一個新手:( –

）您可以在HTML選項卡中看到HTML元素，並且您可以在右側看到他們的樣式， – SLaks

它實際上不在輸入欄內。如果您查看源代碼（我使用了Chrome開發人員工具），您會看到整個事情是一個div，標籤包含貨幣符號，並且實際的文本輸入字段在它旁邊。

來源

2011-07-07 15:58:52

這是他們所使用的代碼：我只想把它複製

<div class="amt_box bg_white"> 
    <label class="currency-display">$</label> 
    <input class="big-field" type="text" 
     tabindex="1" value="" name="Funds[goalamount]"> 
</div>

。

來源

2011-07-07 16:05:18 Phil

我想你所談論的佔位符使用此：

<input type="text" placeholder="Type here" />

來源

2012-09-25 14:47:46

如何讓標籤顯示在輸入欄內？

回答

相關問題