CODEWITHSUNDEEP
htmlcssz-index
Greg Hinch
Greg Hinch

Reputation: 827

What's going on with z-indexing here of inputs in IE8?

I am trying to layer 2 inputs on top of each other in HTML. In most browsers (Safari, FF, IE7) I do this with the following code and it works fine so that the second input is placed on top of the first with the lighter text color, and when you click in the area the focus goes to it. In IE8 however, the first one appears to be over the second one, so that when you click it and start typing you see the lighter colored text.

<!DOCTYPE html>

<html>
    <head>
        <title>test</title>
        <style type="text/css" media="screen">
            input {
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <input style="position:absolute;z-index: 1;color: #dedede;">
        <input type="text" style="position:relative;z-index: 3;">
    </body>
</html>

Upvotes: 3

Views: 544

Answers (1)

MatTheCat
MatTheCat

Reputation: 18751

The problem seems pretty similar to that one, so I think you'll have to wrap a <input> into a <div> with higher z-index.

Upvotes: 1

Related Questions