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>
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.