一个搜索框美化

最新推荐文章于 2024-05-21 09:44:44 发布

「已注销」

最新推荐文章于 2024-05-21 09:44:44 发布

阅读量408

点赞数 1

https://github.com/gztrljh

本文链接：https://blog.youkuaiyun.com/ljh101/article/details/109502387

版权

本文探讨了如何在网页中实现一个既美观又实用的搜索框设计，涵盖了CSS样式设置、交互效果以及响应式布局的实现。通过实例代码解析，展示了如何利用HTML和JavaScript创建动态搜索建议功能，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <!-- 搜索 -->
            <div class="zan-search">
                <form class="zan-search-form" action="#">
                    <input type="text" class="zan-search-input" placeholder="订单、用户名、文章标题">
                    <span class="glyphicon glyphicon-search zan-search-icon" aria-hidden="true"></span>
                </form>
                <button type="button" class="close zan-search-close" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
            </div>

/* 搜索表单让图标定位 */
.zan-search-form {
  position: relative;
}

/* 搜索框美化 */
.zan-search-input {
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 6px 12px;
  padding-right: 40px;
  font-size: 14px;
}

/* 提交按钮 */
.zan-search-submit {
  outline-width: 0;
  border: none;
  background: none;
  position: absolute;
  top: 5px;
  right: 8px;
  padding-left: 5px;
  border-left: 1px solid #e7e7e7;
}
.zan-search-submit::before {
  font-family: "Glyphicons Halflings";
  content: "\e003";
  color: #5f6f81;
}