我的 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 索引是正确的,不是吗?
编辑:解决方案
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;
}
最佳答案
我假设这是为了文本框水印?
如果是这种情况,那么我会使用 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,则会显示标签。
关于html - 将标签放在文本字段的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10318882/