最终效果如下图所示：
前置知识:iconfont图标库本地使用的方式
1. 进入阿里巴巴矢量图标库首页
2. 选择任一图标库有
3.选择你要使用的字体图标,点击加入购物车
4. 点击右上角的购物车
5.选择添加至项目
6.保存到项目跳转至该项目,下载至本地
7.将下载的文件解压缩,只需将下面的文件移入你的项目文件即可
8.在html文件中,即可正常使用了
<link rel="stylesheet" href="./iconfont/iconfont.css" />
具体实现代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- 在线引入iconfont图标库 --> <link rel="stylesheet" href="./iconfont/iconfont.css" /> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .container { display: flex; position: relative; margin: 100px; } input { width: 200px; height: 30px; padding-left: 30px; border-top-left-radius: 25px; border-bottom-left-radius: 25px; border: 1px solid #cc9756; border-right: none; } /* 取消输入框高亮 */ input:focus { outline: none; } .container::after { content: '\eafe'; position: absolute; top: 7px; left: 10px; font-family: 'iconfont' !important; font-size: 16px; font-style: normal; color: #c9c9d1; } .search { width: 100px; height: 30px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; background: #cc9756; text-align: center; line-height: 30px; color: white; } </style> </head> <body> <div class="container"> <input type="text" placeholder="茅台" /> <div class="search">搜索</div> </div> </body> </html>
达到的效果图如下：
