Question

I’m trying to build a Google Instant-type search bar where the auto-completed text is a light grey. Now, I’m using two different form inputs to achieve this (I believe this is how Google does it, as well). I’m doing it now as seen below. Even though it works, I feel like it is certainly not the appropriate way to do this. Can anyone provide a cleaner solution so these two INPUT forms can be right on top of each other? Thanks!

<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;
}

Answer 1

Since you’re doing position:absolute, you can use top:0 and left:0 styles to fix the second input field to the corner of the container element.

In order to use absolute in this way, the container element needs to be position:relative, so you should enclose them inside a wrapper <div>.

Something like this:

.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>

This may not be perfect, but should give you something to work with.

Hope that helps.