Zインデックスすなわちプレースホルダ

Question

私は次のHTMLを得た

：

<div class="inputContainer"> 
    <div class="inputPlaceholder">Hello world</div> 
    <input type="text" class="input" /> 
</div> 

次のCSS：

.inputContainer{ position: relative; background-color: green; } 
.input { position: absolute; top: 0px; left: 0px; background: transparent none; -webkit-appeareance: none; } 
.inputPlaceholder { position: absolute; top: 0px; left: 0px; color: gray } 

そして次JS：

$('.inputContainer .input').keyup(function(){ 
     $(this).parent().find('.inputPlaceholder').hide(); 

     if($(this).val() == ''){ 
      $(this).parent().find('.inputPlaceholder').show(); 
     } 
    }); 

問題はIEであり、プレースホルダのZ-インデックスのために入力テキストに集中することはできません。私は.inputPlaceholder z-indexを-1に、.inputを100に設定しようとしましたが、nothi他のブラウザでもうまくいっていますが、Foursquareはこの同じテクニックを検索ボックスで使用していました。

どうすればこの問題を解決できますか？その原因は何ですか？

Answer 1

「自然」重なり順を変更するには、あなたのHTMLを再アレンジ：

<div class="inputContainer"> 
    <div class="inputPlaceholder">Hello world</div> 
    <input type="text" class="input" /> 
</div> 

Answer 2

それはかなり古い質問ですが、私は9ソリューションが「偽」の背景色を追加することですIEで同じ問題を抱えていました、例えば：

input{ 
    background-color: rgba(0,0,0,0); 
} 

重要：背景が透明のプロパティを設定することはできません、それは、RGBAと答えてくれてありがとう