3

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>
1
  • It's in the context of a much more complex UI that isn't really relevant to the question, so I've simplified it to the specific issue.
    – Greg Hinch
    Commented Jan 6, 2011 at 2:19

1 Answer 1

1

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.

1
  • Looks like it has to do with the transparent background on the inputs. You can also solve it by adding a transparent background image to them.
    – Greg Hinch
    Commented Jan 7, 2011 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.