当前位置:主页 > CSS3库 > 表单 >

CSS扩展搜索框
栏目分类:表单   发布日期:2021-09-04   浏览次数:

一个用纯 CSS 编写的简单扩展(点击扩展)搜索框。

使用:

1. 在搜索框中添加搜索字段和搜索按钮。

<div class="search-box">
  <input type="text" class="search-input" placeholder="开始寻找东西!">
  <a class="search-btn" href="#">
    <!-- 搜索图标 -->
    <i class="fas fa-search"></i>
  </a>
</div>

2. 启用搜索按钮以切换搜索框。

/* div */
.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #cd595a;
  height: 40px;
  border-radius: 50px;
  padding: 10px;
}
 
/* input */
.search-input {
  outline: none;
  border: none;
  background: none;
  width: 0;
  padding: 0;
  color: #fff;
  float: left;
  font-size: 16px;
  transition: .3s;
  line-height: 40px;
}
 
.search-input::placeholder {
  color: #dbc5b0;
}
 
/* icon */
.search-btn {
  color: #fff;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: #cd595a;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: .3s;
}
 
.search-input:focus,
.search-input:not(:placeholder-shown) {
  width: 240px;
  padding: 0 6px;
}
 
.search-box:hover > .search-input {
  width: 240px;
  padding: 0 6px;
}
 
.search-box:hover > .search-btn,
.search-input:focus + .search-btn,
.search-input:not(:placeholder-shown) + .search-btn {
  background: #fff;
  color: #cd595a;
}


官方网站:https://github.com/fatihhidiroglu/extended-search-box

相关热词: 搜索框搜索

上一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库