html - ` ` の後ろの透明 `を揃える方法`

Question

<label>透明の後ろの中央に揃え<input>てから、入力オンフォーカスの不透明度を 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​​/