Iyke Uche Iyke Uche -4 years ago 97
CSS Question

how to re-position/float a search box onclick/onfocus

Please kindly assist me, I am trying to design a search box similar to the google home page in which it (search box) lays at the center but when on focus the text box floats to the top left. I have been able to alter the size of the search box but I cant seem to re-position it as desired.



<style>

input[type=text] {
width: 450px;
}

input[type=text]:focus {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
</style>


<form id="form1" action="/search.php" method='GET' style="padding: 20px">

<center>
<h1>Huzzle</h1>
<p>
<input name="search" id="search" type="text" class="footer1" size='50' placeholder=" Search for service...."></p>
<p>&nbsp;</p>
</center>

<body>
<p class="footer1">
<center>
<input name='submit' type='submit' class="md-trigger md-setperspective search" value='Search'>
</center>
</p>
</form>
</body>




Answer Source

Use the position attribute to modify the position of the input.

Additionally, you'll want to use all instead of width in your transition animation. Otherwise, it will not animate when it changes position.

Below is a simplified version of your code with only the relevant styles embedded.

input[type=text] {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

input[type=text]:focus {
  top: 10%;
  left: 10%;
}
<input name="search" type="text" placeholder="Search for service....">

Of course, you'll want to edit the top and left settings to suit your exact requirements.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download