当前位置: 首页 > 工具软件 > inputfile > 使用案例 >

input file修改样式

锺博耘
2023-12-01

input file的样式比较丑,直接进行修改时,无法修改其中按钮的样式。
只需简单的三步就可以搞定:
第一步:
将input file进行隐藏:

#file {
  display: none;
}

第二步:
添加button按钮:

<input id="file" type="file"/><br />
<input type="button" value="上传文件" class="btn"/>

第三步:
点击按钮时,调用input file的点击函数:

<input id="file" type="file"/><br />
<input type="button" value="上传文件" class="btn" @click="clickFile"/>

clickFile函数是自定义的,只需要简单调用file的click函数即可。

clickFile() {
	const input = document.querySelector('#file')
	input.click()
}
 类似资料: