重叠输入表单，我在CSS中正确执行此操作吗？

我正在尝试构建一个Google即时型搜索栏，其中自动完成的文本为浅灰色。现在，我正在使用两种不同的表单输入来实现这一点（我相信Google也是这么做的）。我现在正在做，如下所示。尽管它起作用，但我觉得这肯定不是做这件事的恰当方法。任何人都可以提供更清洁的解决方案，因此这两个INPUT表单可以彼此重合吗？谢谢！重叠输入表单，我在CSS中正确执行此操作吗？

<form method="post" enctype="multipart/form-data" action=""> 
    <input type="text" name="searchtext" id="searchtext" autocomplete="off" style=""> 
    <input type="text" name="searchtextgrey" id="searchtextgrey" disabled="disabled" 
     autocomplete="off"> 
    <input type="submit"> 
</form> 

#searchtext { 
    position:relative; 
    background: transparent; 
    height:38px; 
    width:450px; 
    z-index:5; 
    background-repeat:no-repeat; 
    background-position: 257px 7px; 
    padding-left:5px; 
    padding-right:5px; 
} 

#searchtextgrey{ 
    color: #e5e5e5; 
    position:absolute; 
    background: white; 
    height:38px; 
    width:450px; 
    z-index: 4; 
    overflow:hidden; 
    margin-left:-477px; //<---this can't be the best way to do it 
    padding-left:5px; 
    padding-right:5px; 
}

来源

2011-01-23 Ryan

你试过显示：无？ – kalkin 2011-01-23 15:50:00

既然你做position:absolute，您可以使用top:0和left:0风格到第二输入栏固定在容器元素的角落。

为了以这种方式使用absolute，容器元素需要为position:relative，因此您应该将它们放在包装器<div>内。

事情是这样的：

.container {position:relative;} 
.myinput {position:absolute; top:0px; left:0px; } 
.main {background:transparent; color:black;} 
.suggestion {color:gray;} 

<div class='container'> 
    <input class='myinput suggestion' value='abcdefghij' /> 
    <input class='myinput main' value='abcde' /> 
</div>

这可能不是完美的，但应该给你一些帮助。

希望有所帮助。

来源

2011-01-23 16:03:20 Spudley

重叠输入表单，我在CSS中正确执行此操作吗？

回答

相关问题