Question

I got the following html:

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

The following 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 }

And the following js:

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

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

The problem is with IE, you cannot focus on the input text because of the z-index of the placeholder, I have tried to put the .inputPlaceholder z-index to -1 and .input to 100 but nothing is working, it is working perfect in other browsers though, I know that Foursquare used this same technique on their searchbox.

How can I solve this problem, and what is causing it?

Answer 1

Re-arrange your HTML to “naturally” change the stacking order:

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