1. 首页
  2. Language
  3. 搜索框，获取焦点拉长效果(css)

搜索框，获取焦点拉长效果(css)

原文地址

搜索框，获取焦点拉长效果

:focus 伪元素 改变宽度 + transition

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>搜索框，获取焦点拉长效果</title>
    </head>
  <style>
    .search{
      width:80px;
      height:40px;
      border-radius:40px;
      border:2px solid lightblue;
      position: absolute;
      right:200px;
      outline:none;
      text-indent:12px;
      color:#666;
      font-size:16px;
      padding:0;
      -webkit-transition:width 0.5s;
      transition:width 0.5s;
    }
    .search:focus{
      width:200px;
    }
  </style>
    <body>
    <input class="search" type="text" placeholder="搜索...">
    </body>
</html>