HTML实现移动端固定悬浮半透明搜索框超酷html5+CSS3绿色发光搜索框表单提交用html5实现语音搜索框的方法 分享8款纯CSS3实现的搜索框功能CSS3实现的可伸缩搜索框效果(无js)CSS 漂亮搜索框美化代码css 教学实例 漂亮的搜索框基于html css实现带搜索图标的搜索框功能

 Question. 问题

在移动端商城系统中，我们常常看到位于页面顶部有一个搜索框，这类搜索框博主比较喜欢的是固定在页面顶部，半透明悬浮，能依稀看见部分轮播图的形式。

要制作这样的搜索框，技术关键在于：

• fixed 搜索框定位
• opacity 设置透明度

Solution. 解决

首先我们定义一个 html 片段：

搜索

header 标签为搜索框，下面的 div 为一个背景图。

同时附上 CSS 样式：

很长的一段 CSS 样式，但是其核心就两句话position: fixed; /* 决定了搜索框置顶 */ 和 background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */，其他的样式均为了页面的排版，排版的细节需要各位读者自己写一遍理解，过程可能需要花费点时间。

这样我们就完成了一个静态的搜索框：

备注：这里的搜索图标使用了 iconfont，读者可自行到 iconfont矢量图标库 下载。

至此，我们还需要通过 JS 实现一些动效：

用于实现用户切换输入时「搜索」位置图标的切换，原理很简单，增加和移除 class 类，这些类定义了样式。

 .active:before { position: absolute; top: 11px; left: 5px; right: auto; display: block; margin-right: 0; font-size: 21px; } .active input[type=search] { text-align: left } .active .placeholder{ display: none } 

备注：这里需要引入 jQuery，千万别忘了！

Extension. 扩展

完整 html 代码：

搜索

总结

以上所述是小编给大家介绍的HTML实现移动端固定悬浮半透明搜索框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！