修改提交文件的input类型为file控件的样式

最新推荐文章于 2023-06-12 15:51:02 发布

输出是最好的学习

最新推荐文章于 2023-06-12 15:51:02 发布

阅读量615

点赞数 1

分类专栏：前端文章标签：控件 file input 默认样式

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/75193980

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

这个控件的样式，我想是一直被人鄙视的，丑的不能再丑了，今天终于找到一个方法可以修改它的默认样式。代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#fileInput{
			display: none;
		}
		button{
			width: 120px;
			height: 30px;
			border-radius: 20px;
			background: orange;
			color:white;
			outline: none;
		}
	</style>
</head>
<body>
	<input type="file" id="fileInput">
	<button οnclick="showFileInput()">选择文件</button>
	<script type="text/javascript">
		function showFileInput(){
			var fileInput = document.getElementById("fileInput");
			fileInput.click();
		}
		
	</script>
</body>
</html>

将默认的file隐藏，重新设置button的样式，并且在他点击的时候，我们调用type为file的点击事件。

之前通过css也巧妙的修改过，但是还是这个来的直接啊

输出是最好的学习

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
修改提交文件的input类型为file控件的样式

这个控件的样式，我想是一直被人鄙视的，丑的不能再丑了，今天终于找到一个方法可以修改它的默认样式。代码如下所示： Document #fileInput{ display: none; } button{ width: 120px; height: 30px; border-radius: 20px; background: orange;
复制链接

扫一扫