input中type=“file“设置自定义文件按钮点击

原理z-index覆盖

<div class="uploadInputsStyle">
                    <input type="text" id="resumeNameId">
                </div>
                <div class="uploadFileStyle" id="uploadFileId">
                    <input type="file" name="resume" id="resume" class="resumeStyle">
                    <div class="uploadStyle"><span>本地上传</span><i class="iconfont uploadIcon">&#xe625;</i></div>
                </div>

.uploadFileStyle {
    position: relative;
    width: 100%;
    height: 60px;
    text-align: center;
    cursor: pointer;
}

.resumeStyle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    cursor: pointer;
}

.uploadStyle {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    text-align: center;
}

.uploadStyle span {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.29);
}

.uploadIcon {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.29);
}

最后

以上就是壮观店员为你收集整理的input中type=“file“设置自定义文件按钮点击的全部内容，希望文章能够帮你解决input中type=“file“设置自定义文件按钮点击所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。