layui 输入框添加自定义图标

layui：轻松在输入框添加自定义搜索图标教程

最新推荐文章于 2025-09-11 02:26:08 发布

原创最新推荐文章于 2025-09-11 02:26:08 发布 · 8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

layui 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用layui框架在输入框中插入自定义图标，通过CSS样式调整背景和图标位置，实现实用的搜索框设计。

使用 layui 在输入框里添加自定义图标，layui 官网文档没有提供相关内容，但可以通过下面方式实现

1、准备好要使用的自定义图标

如 Iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/

将下载好的图标放到项目目录

笔者这里下载一张 32×32 的 png 图片

2、自定义 css 属性

.search {
    background: url(img/search.png) no-repeat 5px center;
    padding-left: 40px;
}

background 属性定义背景指向自定义图标的图片文件

padding-left 属性定义图标占用输入框的长度

3、为输入框添加自定义的 css 属性

完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" rel="stylesheet" />
		<script src="layui/layui.all.js"></script>
		<style type="text/css">
			.top {
				margin-top: 50px;
			}
			.search {
				background: url(img/search.png) no-repeat 5px center;
    			padding-left: 40px;
			}
		</style>
	</head>
	<body>
		<div class="layui-container top">  
			<div class="layui-row">
			    <input type="text" class="layui-input search" />
			</div>
		</div>  
	</body>
</html>

4、运行效果

如下图