原生input[file]组件样式美化

最新推荐文章于 2025-05-28 10:21:49 发布

原创最新推荐文章于 2025-05-28 10:21:49 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了三种实现文件上传按钮美观展示的方法：通过调整透明度和定位；利用label元素结合for属性；通过触发点击事件实现。这些技巧使得按钮既美观又保留了文件选择的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本上有三种方法可以实现

通过 opacity:0 和定位隐藏就可以在使用button的美化样式和input[file]的功能。

<div class="upload">
 <button></button>
 <input type="file" name="file" id="file">
</div>
<style>
#file{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    opacity:0;
}
</style>

2.通过label的for属性绑定input，使用label的样式和input[file]的功能

<label>uplaod<input type="file" style="display: none;"/></label>

3.通过onclick事件获取input操作

<button class="ui-upload" onclick="document.getElementById('upload').click()">upload</button> 
<input type="file" id="upload" style="display:none;" />