【每日一练】18—搜索框效果的实现

共 2699字，需浏览 6分钟

· 2022-07-05

写在前面

搜索框是很常用的一个功能，因此，今天我们一起来练习写一个搜索框的效果，希望今天的这个练习对你有帮助，下面我们一起来看今天练习的最终效果：

HTML代码：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>【每日一练】18—搜索框效果的实现</title></head><body>  <div class="search">    <div class="icon"></div>    <div class="input">      <input type="text" name="" id="SearchInput" placeholder="Search">    </div>    <span class="clear" onclick="document.getElementById('SearchInput').value = ''"></span>  </div>  <script type="text/javascript">    const icon = document.querySelector('.icon');    const search = document.querySelector('.search');    icon.onclick = function(){      search.classList.toggle('active');    }</script></body></html>

CSS代码：

*{  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins', sans-serif;}body{  position: relative;  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background: #fafafa;}.search{  position: relative;  width: 60px;  height: 60px;  background: #fff;  border-radius: 60px;  overflow: hidden;  transition: 0.5s;    box-shadow: 0 0 0 2px #00a6bc;}.search.active{  width: 360px;}.search .icon{  position: absolute;  left: 0;  top: 0;  width: 60px;  height: 60px;  background: #fff;  display: flex;  justify-content: center;  align-items: center;  cursor: pointer;  z-index: 1;}.search .icon:before{  content: '';  position: absolute;  width: 15px;  height: 15px;  border: 3px solid #00a6bc;  border-radius: 50%;  transform: translate(-4px,-4px);  transition: 0.5s;}
.search .icon:after{  content: '';  position: absolute;  width: 3px;  height: 12px;  background:#00a6bc;  transform: translate(6px,6px) rotate(315deg);}
.search .input{  position: relative;  width: 300px;  height: 60px;  left: 60px;  background: #f0f;  display: flex;  justify-content: center;  align-items: center;}.search .input input{  position: absolute;  top: 0;  width: 100%;  height: 100%;  padding: 10px 0;  border: none;  outline: none;  font-size: 18px;}
.clear{  position: absolute;  top: 50%;  transform: translateY(-50%);  right: 15px;  width: 15px;  height: 15px;  display: block;  background: #fff;  cursor: pointer;  display: flex;  justify-content: center;  align-items: center;}.clear:before{  position: absolute;  content: '';  width: 1px;  height: 15px;  background: #999;  transform: rotate(45deg);}.clear:after{  position: absolute;  content: '';  width: 1px;  height: 15px;  background: #999;  transform: rotate(315deg);}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能
请点击下方公众号

【每日一练】18—搜索框效果的实现

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号