Question

请帮助我，我正在尝试设计一个类似于谷歌主页的搜索框，其中（搜索框）位于中心但在焦点时文本框浮动到左上方。我已经能够改变搜索框的大小，但我似乎无法根据需要重新定位它。

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

使用position属性修改输入的位置。

此外，您还需要在all动画中使用width代替transition。否则，当它改变位置时它不会动画。

下面是代码的简化版本，只嵌入了相关的样式。

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

当然，您需要修改top和left设置以满足您的具体要求。

如何重新定位/浮动搜索框onclick / onfocus

1 个答案: