Html 透明文本框底图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3757068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transparent text box underlay
提问by James
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.
我正在寻找克隆 Google Instant“底层/提前输入”类型的外观，其中系统预测的内容是灰色的，并且在您输入的内容之前。
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.
它的技术部分我完全排序，以及表示文本。我只是无法弄清楚如何在灰色文本的顶部进行 CSS 定位和透明文本框。
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.
我尝试改编来自其他来源的代码，但无法获得透明文本框下方带有灰色文本的文本。
回答by Robert
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 divtogether.
我相信你正在寻找这样的东西。请记住，它们需要放在一起，因此最好将它们包装div在一起。
HTML
HTML
<div class='top'>
<input type='text' id='gray'/>
</div>
<div>
<input type='text' id='type'/>
</div>?
CSS
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
现场示例
Edit
This positioning works by stacking a position:relativedivon top of another block level element, then setting the div's contents to absolute, but with no positioning. This causes the divto collapse as it has no contents, and - as long as neither block element has a margin - the 0,0coordinates for absolute positioning should put it right on top of the block element below. Presto. This is the way Google does it.
编辑
此定位的工作原理是将 a 堆叠position:relativediv在另一个块级元素的顶部，然后将div的内容设置为绝对，但没有定位。这会导致div折叠，因为它没有内容，并且 - 只要块元素都没有边距 -0,0绝对定位的坐标应该将它放在下面的块元素的顶部。普雷斯托。这就是谷歌的做法。
