Question

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

Answer 1

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

粗略草图：

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

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

Answer 2

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

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

Answer 3

您可以使用: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/

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

3 个答案: