如何在透明的`<input />`</label>后面对齐`<label>`

时间:2013-05-23 23:04:18

标签: html css forms

如何将<label>置于透明<input>后面,然后将输入onfocus的不透明度设置为1

3 个答案:

答案 0 :(得分:3)

将它们放在相对定位的容器中,然后将一个放在另一个容器上。

粗略草图:

.container { position: relative; }
.container label { position: absolute; z-index: 1; top: 0; left: 0; }
.container input { position: relative; z-index: 2; }

您需要调整边框,填充和边距以适应。

答案 1 :(得分:1)

听起来您正在尝试将占位符文本放在输入字段中。您不需要单独的<label>元素来执行此操作:

<input name="test" placeholder="Example">

答案 2 :(得分:0)

您可以使用:focus伪类在焦点处选择输入并应用opacity: 1。您可以使用绝对定位使输入显示在标签文本的前面。

label {
    position: relative;
}
input {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}
input:focus {
    opacity: 1;
}

http://jsfiddle.net/ExplosionPIlls/EHxRr/

然而,在我看来,使用输入的placholder属性会产生相同的效果。

http://jsfiddle.net/ExplosionPIlls/EHxRr/2/