自定义<input type="file">样式遇问题：原生按钮部分可见（疑受jQuery干扰）

我太懂这种烦恼了——明明给文件上传按钮写了自定义样式，结果Chrome和Firefox里还是能看到原生按钮的边角，还怀疑是不是jQuery在捣乱。咱们一步步来拆解解决：

第一步：先排除jQuery的干扰 #

你提供的这段jQuery代码function() { $('#imageuploadform').submit(); }只是负责表单提交的逻辑，本身根本不会修改input的样式。你可以先临时把这段代码注释掉，刷新页面看看原生按钮的残留还在不在。如果还是有，那问题肯定出在CSS样式覆盖不彻底上，和jQuery没关系。

第二步：彻底搞定原生input的CSS隐藏问题 #

原生file input在不同浏览器里有自带的顽固样式，咱们得把它的视觉痕迹完全抹掉，同时还要保留它的点击上传功能（这点很重要，不能用display:none或者visibility:hidden，会直接废掉上传功能）。

推荐你把CSS改成这样：

#imageuploadform input[type="file"] {
    background: url("../images/selecteaza.png") no-repeat center center;
    width: 186px;
    height: 40px;
    border: none;
    color: transparent;
    font-size: 0 !important;
    /* 新增这几个属性，彻底隐藏原生按钮 */
    opacity: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* 给父容器套上相同的背景，作为视觉上的按钮 */
.formupload {
    background: url("../images/selecteaza.png") no-repeat center center;
    width: 186px;
    height: 40px;
    display: inline-block;
    position: relative;
    top: -10px;
}

• opacity: 0：让原生input完全透明，但依然能被点击，完美解决"看不见但能用"的需求
• cursor: pointer：保证鼠标移上去显示手型，不破坏用户的交互感知
• 父容器.formupload设置和input一样的背景图，用户看到的是这个容器的样式，点击的却是覆盖在上面的透明原生input，视觉和功能就统一了

第三步：更稳妥的替代方案（推荐） #

如果觉得和原生input较劲太麻烦，不如用标签关联的方式彻底分离样式和功能：
先修改HTML，把原生input隐藏，用一个自定义按钮来触发它：

<form action="../include/upload-local-file.php" method="post" enctype="multipart/form-data" id="imageuploadform">
    <div class="uploaded" style="display:inline-block"></div>
    <div class="formupload" style="display: inline-block; position: relative; top: -10px;">
        <input name="imagefile" id="file" type="file" class="uploadinput" style="display:none;" />
        <button type="button" class="custom-upload-btn">选择文件</button>
    </div>
</form>

然后加几行jQuery代码触发点击：

$('.custom-upload-btn').click(function() {
    $('#file').click();
});

// 保留你原来的表单提交逻辑
$('#imageuploadform').submit(function() {
    // 这里还可以加个文件选择验证，比如检查是否选了文件
});

最后你就可以随便自定义.custom-upload-btn的样式了，完全不用管原生input的破事：

.custom-upload-btn {
    background: url("../images/selecteaza.png") no-repeat center center;
    width: 186px;
    height: 40px;
    border: none;
    cursor: pointer;
    /* 想加啥样式加啥，比如 hover 效果 */
}
.custom-upload-btn:hover {
    opacity: 0.9;
}

这种方案兼容性拉满，各个浏览器表现完全一致，再也不用纠结原生样式的坑了。

内容的提问来源于stack exchange，提问作者Alex