input(type="file")中“未选择任何文件”去除，以及样式整改/全选框（type="checkbox"）样式整改

最新推荐文章于 2023-02-24 16:07:33 发布

21-夜一

最新推荐文章于 2023-02-24 16:07:33 发布

阅读量7.1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42691149/article/details/104310872

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一般我们上传文件的按钮代码，效果如下：

jsp:
在这里插入图片描述

效果：
在这里插入图片描述

但是为了美观或者开发需求，一般需要去掉自带的"未选择任何文件",所以可以采用一下方法进行改进：

思路：
1.< input class=“excel_file” type=“file” accept=".xlsx,.xls;"> 用file表示
2. < input type=“button” id=“btn” value=“选择文件”> 用buttom表示
在file原有的的基础上加上 id=“fileinp” ,然后用样式opacity: 0把他整个隐藏起来，在file上面，再输入一个作为我们需要看到的显示的buttom,最后用label包起来，把label的样式设置为relative，看到是buttom，但实际我们点击的是file。
（验证：因为我们buttom的样式写了一个 cursor: pointer;的样式，鼠标放上去指针会改变，但是这里不会改变，说明我们点到的是file，而不是buttom）
补充： label 与 label for的区别

jsp（通过 label 标签绑定 input 标签，然后隐藏 input ，添加 button 和 span 来自定义提示语：）:

 <label for="fileinp">
      <input type="button" id="btn"  value="选择文件"><span id="text"></span>
      <input class="excel_file" type="file" accept=".xlsx,.xls;" id="fileinp">
 </label>

css:

#fileinp{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
#btn{
    cursor: pointer;
    padding: 5px 10px;
    background: #FFF;
    color: #eea931;
    border: solid 1px #eea931;
    border-radius: 5px;
    height: 31px;
    width: 81px;
}

效果：
在这里插入图片描述
如果希望鼠标放上去不提示"未选择任何文件",可以设置title=""，如下:

 <label for="fileinp">
      <input type="button" id="btn"  value="选择文件"><span id="text"></span>
      <input class="excle_file" type="file" title="" accept=".xlsx,.xls;" id="fileinp">
</label>

在这里插入图片描述

如果要选择文件后提示语也跟着改变（效果如下）：

在这里插入图片描述
input 发生变化时，span 的内容修改为 input 的 value 值，代码如下：

js:

$("#fileinp").change(function () {
    $("#text").html($("#fileinp").val());
})

同上方法：全选框（type=“checkbox”）样式整改

在这里插入图片描述
jsp:

 <label for="fileinp">
     <span class="icon_select" id="btn">全选</span>
     <input class="jdcheckbox selectAll" type="checkbox" id="fileinp">
</label>

js:

#fileinp{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}


#btn{
    font-weight: 400;
    color: #333333;
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    height: 1.40625rem;
    line-height: 1.40625rem;
    padding-left: 1.18125rem;
    color: #666666;
    font-size: 14px;
    cursor: pointer;
    background: url(../images/select.png) no-repeat 0.4375rem center/0.5rem auto;
}