type=file按钮样式改造

最新推荐文章于 2023-02-16 10:37:57 发布

等不到来世

最新推荐文章于 2023-02-16 10:37:57 发布

阅读量1.0k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ASP.NET 文章标签： file

本文链接：https://blog.youkuaiyun.com/szx1999/article/details/78173021

ASP.NET 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现自定义文件输入框的方法，通过隐藏默认的文件选择控件并用自定义样式替代，使得文件上传界面更加美观且符合整体设计风格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：

<div class="file-wrap">
	<input type="file" id="myfile" name="myfile" accept=".png,.jpeg,.jpg,.gif"/>
	选择图片
</div>

css：

.file-wrap {
	position: relative;
	width: 119px;
	height: 37px;
	border-radius: 4px;
	background-color: #ed4040;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-attachment: scroll;
	line-height: 37px;
	text-align: center;
	font-size: 16px;
	color: white;
	cursor: pointer;
	overflow: hidden;
	float: left;
	margin-right: 20px;
	z-index: 1;
}

	.file-wrap input {
		position: absolute;
		width: 119px;
		height: 40px;
		line-height: 40px;
		font-size: 0;
		opacity: 0;
		-moz-opacity: 0;
		left: 0px;
		top: 0px;
		cursor: pointer;
		z-index: 2;
	}

font-size:0;是关键。