html - z-index 即占位符

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-index，您无法专注于输入文本，我尝试将 .inputPlaceholder z-index 设置为 -1 并将 .input 设置为 100，但没有任何效果，尽管它在其他浏览器中运行良好，但我知道 Foursquare 在其搜索框上使用了相同的技术。

我该如何解决这个问题，是什么原因造成的？

Answer 1

重新排列您的 HTML 以“自然地”更改堆叠顺序:

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