Transparent text box underlay

Question

I'm looking to clone the Google Instant "underlay/type ahead" type look, where what the system is predicting is grayed out and infront of what you are typing.

The technical part of it I am completely sorted, as well as representing the text. I simply am unable to work out how to do the CSS positioning and transparent textbox over the top of the gray text.

Anyone know how to simply do this?

I've tried to adapt code from other sources, but been unable to get the text with the gray text underneath a transparent textbox.

Answer 1

I believe you're looking for something like this. Keep in mind they need to be posiitoned together, so it's probably a good idea to wrap this in a div together.

HTML

<div class='top'>
    <input type='text' id='gray'/>
</div>
<div>
    <input type='text' id='type'/>
</div>​

CSS

.top {
    background:transparent;
    position:relative;
}
input {
    font-size: 14px;
    width: 200px;
}
#type {
    background: transparent;
    z-index: 1;
}
#gray {
    position: absolute;
    z-index: -1;
    color: silver;
}​

Live Example

http://jsfiddle.net/r4jSR/

Edit
This positioning works by stacking a position:relative div on top of another block level element, then setting the div's contents to absolute, but with no positioning. This causes the div to collapse as it has no contents, and - as long as neither block element has a margin - the 0,0 coordinates for absolute positioning should put it right on top of the block element below. Presto. This is the way Google does it.