重疊輸入表單，我在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中正確執行此操作嗎？

回答

相關問題