【原创】一个通用的搜索框，带悬浮功能。

最新推荐文章于 2022-04-03 10:35:02 发布

阿凡提的哥

最新推荐文章于 2022-04-03 10:35:02 发布

阅读量302

点赞数

分类专栏：微信公众号小程序

本文链接：https://blog.csdn.net/ycx1225/article/details/114701712

版权

微信公众号小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .content {
      position: relative;
    }

    .wrapper {
      padding: 4px;
      overflow: hidden;
      font-size: 14px;
      position: fixed;
      top: 20px;
      left: 100px;
    }

    .wrapper input {
      width: 200px;
      display: inline-block;
      padding: 4px 32px 4px 11px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      font-size: 14px;
      line-height: 1.5715;
      background-color: #fff;
      color: rgba(0, 0, 0, .85);
      transition: all 0.3s;
    }

    .wrapper input:hover {
      border-color: #1890ff;
    }

    .wrapper input:focus {
      outline: 0;
      border: 1px solid #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
    }

    .wrapper .icon {
      width: 16px;
      height: 16px;
      position: absolute;
      top: 12px;
      left: 225px;
      cursor: pointer;
    }

    .wrapper .icon svg {
      color: rgba(0, 0, 0, 0.65);
    }

    .wrapper .extra {
      display: inline-block;
      height: 32px;
      line-height: 32px;
      color: #1890ff;
      cursor: pointer;
      margin-left: 4px;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="wrapper">
      <input id="search" type="text" placeholder="请输入" name="fname">
      <div class="icon">
        <svg viewBox="64 64 896 896" focusable="false" data-icon="search" width="100%" height="100%" fill="currentColor"
          aria-hidden="true">
          <path
            d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
          </path>
        </svg>
      </div>
      <div class="extra">高级搜索</div>
    </div>
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</body>
<script>
  var input = document.getElementById('search')
  var icon = document.getElementsByClassName('icon')[0]
  var extra = document.getElementsByClassName('extra')[0]
  function search() {
    console.log('do sth')
  }
  icon.addEventListener('click', function () {
    search()
  })
  extra.addEventListener('click', function () {
    console.log('in')
  })
</script>

</html>

效果