地方標籤上的文本框

Question

我的html：

<input type="text" value="" id="email1" class="inputfield_ui" /> 
<label>Email address 1</label> 

我inputfield CSS：

width:95%; 
z-index:3; 

我標籤的CSS：

position:absolute; 
display:block; 
top:8px; 
left:11px; 
color:#CCCCCC; 
z-index:1; 

當我嘗試點擊標籤上輸入一些它不會允許我這樣做...而是會顯示一個默認光標，我將不得不單擊旁邊的文本字段的其他空間來寫一些東西ing ...

z-indexes是正確的，是不是？

編輯：解

HTML：

<input type="text" value="" id="email1" class="input" /> 
<label>Email address 1</label> 
<span class="input_bg"></span> 

CSS：

input{ 
    background:transparent; 
    z-index:1; 
} 
label{ 
    z-index:2; 
} 
.input_bg{ 
    /*input css with background*/ 
    z-index:3; 
} 

Answer 1

HTML：

<input type="text" value="" id="email1" class="input" /> 
<label>Email address 1</label> 
<span class="input_bg"></span> 

CSS：

input{ 
    background:transparent; 
    z-index:1; 
} 
label{ 
    z-index:2; 
} 
.input_bg{ 
    /*input css with background*/ 
    z-index:3; 
} 

Answer 2

的z-index不無定位工作。嘗試將position:relative;添加到輸入輸入CSS。

Answer 3

我假設這是爲了文本框水印的目的？

如果是這樣的話，那麼我會使用CSS來隱藏標籤（不要刪除它的可訪問性用途）：

label 
{ 
    display:none; 
} 

然後使用JavaScript工具來顯示文本水印。有很多很好的jQuery的解決方案是：

http://code.google.com/p/jquery-watermark/

它然後將類似的情況：

$("#email1").watermark("Email address 1"); 

---

然而，這可以改善，讓你不不必爲每一個元素應用這樣的做法：

$(".watermark").watermark($(this).attr("title")); 

或者，如果你所有的input的有相關label S，你可以應用它們是這樣的：

$(".watermark").watermark($("label[for='" + $(this).attr("id") + "']").html()); 

這樣，如果用戶不啓用JavaScript，那裏有仍然title依靠如果他們沒有CSS，那麼標籤就會顯示出來。