在文本字段上放置标签

Question

我的HTML：

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

我的输入字段css：

width:95%;
z-index:3;

我的标签css：

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

当我尝试点击标签输入它不允许我这样做的东西时...而是会显示一个默认光标，我将不得不点击文本字段的另一个空格旁边写一些东西......

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

我假设这是出于文本框水印的目的？

如果是这种情况，那么我会使用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，则可以像这样申请：

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

这样一来，如果用户没有启用javascript，那么仍然需要依赖title，如果他们没有CSS，则会显示标签。

Answer 2

如果没有定位，

z-index不起作用。尝试将position:relative;添加到输入输入CSS。

Answer 3

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;
}