html - 如何在透明`后面对齐```

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​​/