CODEWITHSUNDEEP
jquerycsshtml
Iyke Uche
Iyke Uche

Reputation: 15

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>

Upvotes: 0

Views: 50

Answers (1)

Wes Foster
Wes Foster

Reputation: 8900

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.

Upvotes: 1

Related Questions