透明文本框底衬

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坐标应该将它放在下面的块元素的顶部。普雷斯托。这就是谷歌的做法。