html+css实现自定义图片上传按钮

最新推荐文章于 2022-07-19 21:55:42 发布

csdn-Allen

最新推荐文章于 2022-07-19 21:55:42 发布

阅读量2.3k

点赞数

文章标签： html+css实现自定义图片上传按钮

本文链接：https://blog.csdn.net/baidu_41601299/article/details/100542118

版权

普通的input[type=‘file’]的效果很朴素
在这里插入图片描述
可以自定义一个file选择文件的按钮：

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

思路为：
用定位将自定义的按钮遮住原来的选择文件按钮，
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
（对此，label可实现）
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.btn{
			position: relative;
			display: inline-block;
			width: 75px;
			height: 25px;
			overflow: hidden;
			text-align: center;
			font-size: 14px;
			line-height: 25px;
			vertical-align: center;
			border: 1px solid #23c6c8;
			background-color: #23c6c8;
			color:#fff;
			border-radius: 3px;
		}
		.btn:hover{
			border: 1px solid #23babc;
			background-color: #23babc;
		}
		.btn input{
			position: absolute;
			top:0;
			left: 0;
			opacity: 0;
		}
	</style>
</head>
<body>
	<label type="button" class="btn">
		<span>选择图片</span>
		<input type="file">
	</label>
</body>
</html>

csdn-Allen

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html+css实现自定义图片上传按钮

普通的input[type=‘file’]的效果很朴素可以自定义一个file选择文件的按钮：思路为：用定位将自定义的按钮遮住原来的选择文件按钮，再让点击自定义按钮时触发原来的选择文件按钮的事件即可（对此，label可实现）效果图：<!DOCTYPE html><html lang="en"><head> <meta charset=...
复制链接

扫一扫