放大镜搜索框是现在很多网站都会使用的一个功能,它能够提升用户的使用体验,让用户更加方便地搜索需要的信息。下面,我们就来学习一下如何使用CSS来制作一个简单的放大镜搜索框。
HTML代码: <div class="search-box"> <input class="search-input" type="text" placeholder="请输入搜索内容"/> <i class="search-icon"></i> </div> CSS代码: .search-box{ width: 200px; height: 30px; position: relative; margin: 0 auto; } .search-input{ width: 100%; height: 100%; border: none; outline: none; font-size: 14px; text-indent: 10px; } .search-icon{ width: 18px; height: 18px; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); background-image: url(search.png); background-size: cover; }
首先,我们需要一个div元素作为搜索框的容器,用于包裹输入框和放大镜图标。然后,我们设置该容器的宽度、高度、相对定位以及居中显示。紧接着,我们设置输入框的宽度、高度、去除边框、去除外框、字体大小以及文本缩进。最后,我们设置放大镜图标的宽度、高度、绝对定位、居中显示、垂直居中和背景图像。这样就完成了一个简单的放大镜搜索框。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。