html - テキストフィールドの一番上にラベルを配置します

Question

私の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;
}

score 1 · Accepted Answer

これはテキストボックスの透かしを目的としていると思いますか？

この場合、CSSを使用してラベルを非表示にします（アクセシビリティの目的でラベルを削除しないでください）。

label
{
  display:none;
}

次に、javascriptツールを使用して、透かしを入れたテキストを表示します。これには多くの優れたjQueryソリューションがあります。

次に、次のようなものを適用する場合です。

$("#email1").watermark("Email address 1");

ただし、これは改善できるため、次のような操作を行うことで、すべての要素にこれを適用する必要はありません。

$(".watermark").watermark($(this).attr("title"));

または、すべてinputのが関連付けられているlabel場合は、次のように適用できます。

$(".watermark").watermark($("label[for='" + $(this).attr("id") + "']").html());

このように、ユーザーがjavascriptを有効にしていない場合でも、title依存する必要があります。CSSがない場合は、ラベルが表示されます。

score 0 · Accepted Answer

z-indexはポジショニングなしでは機能しません。position:relative;入力入力CSSに追加してみてください。

score 0 · Accepted Answer

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;
}

3 に答える 3