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>

Answer 2

这是一个相当古老的问题，但我在IE 9中遇到了同样的问题。解决方法是添加“假”＆＃39;背景颜色，例如：

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

重要提示：背景不能设置为透明属性，rgba必须透明

z-index即占位符

2 个答案: