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“设置自定义文件按钮点击内容请搜索靠谱客的其他文章。