透明文本框底衬

Question

我正在寻找克隆Google Instant"underlay/type ahead"类型的外观,系统预测的内容是灰色的,并且在您输入的内容之前.

它的技术部分我完全排序,并代表文本.我只是无法弄清楚如何在灰色文本的顶部进行CSS定位和透明文本框.

有谁知道如何简单地这样做？

我试图调整其他来源的代码,但无法在透明文本框下面获得带有灰色文本的文本.

Answer 1

我相信你正在寻找这样的东西.请记住,它们需要一起放置,所以将它包装在一起可能是一个好主意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/

编辑
此定位的工作原理是position:relative div在另一个块级元素的顶部堆叠,然后将div内容设置为绝对,但没有定位.这会导致div崩溃,因为它没有内容,并且 - 只要两个块元素都没有边距 - 0,0绝对定位的坐标应该将它放在下面的块元素的顶部.普雷斯托.这就是谷歌的做法.