layui 输入框添加自定义图标

最新推荐文章于 2024-04-10 00:00:39 发布

悟世君子

最新推荐文章于 2024-04-10 00:00:39 发布

阅读量7.5k

点赞数 1

分类专栏： layui 文章标签：前端

本文链接：https://blog.csdn.net/wsjzzcbq/article/details/109696364

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

如下图

至此完

悟世君子

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
layui 输入框添加自定义图标

使用 layui 在输入框里添加自定义图标，layui 官网文档没有提供相关内容，但可以通过下面方式实现1、准备好要使用的自定义图标如Iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/将下载好的图标放到项目目录笔者这里下载一张 32×32 的 png 图片2、自定义 css 属性.search { background: url(img/search.png) no-repeat 5px cente...
复制链接

扫一扫