layui 输入框添加自定义图标-蒲公英云

layui 输入框添加自定义图标

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

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

如 Iconfont-阿里巴巴矢量图标库 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>