html - 将标签放在文本字段的顶部

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

score 1 · Accepted Answer

我假设这是为了文本框水印？

如果是这种情况，那么我将使用 CSS 来隐藏标签（不要出于可访问性目的将其删除）：

label
{
  display:none;
}

然后使用 javascript 工具显示带水印的文本。有很多很好的 jQuery 解决方案：

然后是应用以下内容的情况：

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

但是，这可以改进，因此您不必通过执行以下操作将其应用于每个元素：

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

或者，如果您input的所有 s 都有关联label的 s，您可以像这样应用它们：

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

这样，如果用户没有启用 javascript，仍然title可以依赖，如果他们没有 CSS，则将显示标签。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

z-index 在没有定位的情况下不起作用。尝试添加position:relative;到输入输入 CSS。

3 回答 3