將標籤放在輸入上，如何操作？

我試圖在輸入上定位標籤，但似乎他們沒有在他們身上移動，直到我將他們的位置更改爲absolute（我不需要）。將標籤放在輸入上，如何操作？

這裏是我的代碼示例：

<label for="username">Your Email...</label> 
    <input name="username" class="field" type="text" id="username" maxlength="40" />

這裏是CSS：

label { 
    color:#373737; 
    font-weight:bold; 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:18px; 
    margin-left:8px; 
    margin-top:28px; 
    }

，這裏是我所得到的：

The result

現在，這裏是我試圖複製的東西，以及一些奇怪的原因，它在這裏工作，但不在我的工作IDE。 The demo I'm trying to duplicate with my own CSS properties

來源

2011-09-21 Ricardo

您鏈接到的演示將標記的負margin-right添加到<input>的頂部。你沒有在你發佈的CSS中。

來源

2011-09-21 08:35:10

這並不重要，因爲負邊距是從右側設置的，我不關心，我實際需要的是將其垂直放置在輸入上 - 而不是垂直放置。 – Ricardo

@Ricardo：那麼你需要把你的負邊緣放在底部。因爲你還沒有爲你編寫''的CSS代碼，所以我看不到它們相對於另一個的位置，但是這裏有一個提示負底部邊距工作的小提琴：http://jsfiddle.net/pauldwaite/EM7Pz/2/ –

它的工作兄弟，基本上這是如此簡單，我不明白我怎麼沒有，雖然這一點。謝謝。！ – Ricardo

我想基本上你想做的事情已經存在於許多「水印」jQuery插件中。

谷歌「jQuery水印」，你會得到大量的版本。就是說你不需要玩的HMTL/CSS/jQuery的自己

EDITS

如果你想下去，你要去的路線，那麼就定位與一些jQuery的標籤。看看這個小提琴的例子：http://jsfiddle.net/EM7Pz/1/ 你會看到，你絕對定位標籤，然後與jQuery，你改變他們的立場，他們需要在輸入的位置。這樣，你可以改變他們的顏色，大小等...只要你想和給你比水印插件更多的控制

我也給了輸入一個絕對定位的風格只是爲了說明它並不重要的地方輸入，標籤將總是出現在裏面。

來源

2011-09-21 08:35:51

將''設置爲可訪問性仍然是一個不錯的主意，但你說得很對，「水印」就是OP正在嘗試做的事情。對於支持它的瀏覽器，''placeholder' HTML5屬性可以很好地執行：'' –

是的，HTML5的佔位符是一個很好的留言，在完全支持時會很好！：D我認爲OP應該有一個標籤已經爲「用戶名」部分。 –

似乎「佔位符」不適合執行此任務，因爲我想獲得與鏈接的演示相同的結果。實際上2天前，這是我唯一想做的事情，但現在我想添加焦點和'鍵控'功能的顏色變化，我找不到如何用'placeholder'做到這一點。任何幫助？ – Ricardo

看到這個相關的答案：Input with Watermark (css & Jquery)。

作爲附錄這個問題的答案：

您可以設置placeholder屬性等於你在你的label什麼，然後隱藏label與CSS。這使你完全得到你想要的，只需很少的工作。

來源

2011-09-21 08:40:30 thirtydot

也許我不完全理解答案，但似乎像'佔位符'不是這個任務的正確的事情，因爲我想達到像我鏈接的演示一樣的結果。實際上2天前，這是我唯一想做的事情，但現在我想添加焦點和'鍵控'功能的顏色變化，我找不到如何用'placeholder'做到這一點。任何幫助？ – Ricardo

我認爲你擁有它的方式比簡單的標準'佔位符'更糟糕。我建議在我的回答中遵循建議，或者至少使用默認的「佔位符」功能。 – thirtydot

要獲取：

label1 label2 label3 
field1 field2 field3

輸入HTML：

<div id="set"> 
<label for="field1">field1labeltext</label> 
<input id="field1"></input> 
<label for="field2">field2labeltext</label> 
<input id="field2"></input> 
<label for="field3">field3labeltext</label> 
<input id="field3"></input> 
</div>`

並在設定的CSS：

#set{ 
    position:relative; 
    top: 30px; 
    margin-bottom: 30px; 
} 
label{ 
    position:relative; 
    display: inline-block; 
    top:-30px; 
    width: 0px; 
}

最好的問候，
添麪包車斯滕貝亨，
Tieka 。nl

來源

2013-03-15 10:07:08

將標籤放在輸入上，如何操作？

回答

相關問題