上传者: 38545923
|
上传时间: 2022-04-11 13:22:06
|
文件大小: 64KB
|
文件类型: PDF
前言
给大家分享一下前端用处很多的带小图标的搜索框的制作方法。
效果展示
基本思路
1、搜索图像用绝对定位放到搜索框的上方
2、input框设置文本缩进,大小为搜索图像大小加上图像左右两边的外边距
准备
只需一个搜索图标图片,类似于下图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100vw