input[type=file]去掉“未选择任何文件”及样式改进

2024-04-15 11:45| 来源: 网络整理| 查看: 265

input[type=file]去掉“未选择任何文件”及样式改进经验总结第1张

input 标签的 file 属性，在没有选择文件的情况下，默认显示一条文字“未选择任何文件”。

input[type=file]去掉“未选择任何文件”及样式改进经验总结第2张

在选择文件后，该条文字会变成路径和文件的名称。

input[type=file]去掉“未选择任何文件”及样式改进经验总结第3张

如何去掉其默认的“未选择任何文件”提示呢？

查阅资料，没有发现可以直接修改的办法，但是我们可以通过其他方法，实现自定义提示文字的效果。

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

HTML部分

请上传Word文档

CSS部分：

label{ position: relative; } #fileinp{ position: absolute; left: 0; top: 0; opacity: 0; } #btn{ margin-right: 5px; } #text{ color: red; }

效果如下：

input[type=file]去掉“未选择任何文件”及样式改进经验总结第4张

如果要选择文件后提示语也跟着改变，可以用 jQuery 修改 span 标签的内容。

input 发生变化时，span 的内容修改为 input 的 value 值，代码如下：

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

效果如图：

input[type=file]去掉“未选择任何文件”及样式改进经验总结第5张

如果感觉按钮比较丑，可以用CSS稍微调整一下：

#btn{ padding: 5px 10px; background: #00b0f0; color: #FFF; border: none; border-radius: 5px; }

如下图：

input[type=file]去掉“未选择任何文件”及样式改进经验总结第6张

【本文地址】

今日新闻