layui 输入框添加自定义图标

浅浅的花香味﹌ 2022-12-21 04:51 334阅读 0赞

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1][]

**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、运行效果**

如下图

![20201114211336488.gif][]

至此完

[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70]: /images/20221120/75bc1559f80b4048a742c0b493a84f3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1]: /images/20221120/6f3b6d53dbbb49d985f7f9e5e76c0d00.png
[20201114211336488.gif]: /images/20221120/886f1aeee7344e8d8fe010a80317d4a8.png