参考 : input(type="file")中“未选择任何文件”去除,以及样式整改/全选框(type="checkbox")样式整改_input file 未选择任何文件-CSDN博客
<!DOCTYPE html>
<html>
<head>
<style>
label {
position: relative;
}
#fileinp {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
#btn {
padding: 5px 10px;
background: #00b0f0;
color: #FFF;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<label for="fileinp" onchange="selectFile()">
<input type="button" id="btn" value="选择文件"><span id="text"></span>
<input type="file" id="fileinp">
</label>
</body>
<script>
function selectFile() {
document.getElementById('btn').value = document.getElementById('fileinp').files[0].name;
}
</script>
</html>