Geek Answers Handbook

Transparent text frame

I am looking to clone the "Substrate / Type Forward" style in Google Instant, where what the system predicts is grayed out and vice versa what you type.

The technical part of this is completely sorted, as well as presenting the text. I just can't decide how to make CSS positioning and a transparent text block on top of the gray text.

Does anyone know how to do this?

I tried to adapt the code from other sources, but could not get the text with gray text under a transparent text box.

+5
source share
1 answer

, - . , , , , div .

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;
}​

http://jsfiddle.net/r4jSR/

Edit
, position:relative div , div , . div, , - - 0,0 . Presto. Google .

+6

More articles:


All Articles