利用input上传文件按钮优化

最新推荐文章于 2025-05-10 16:19:13 发布

凌云的视界

最新推荐文章于 2025-05-10 16:19:13 发布

阅读量424

点赞数

CC 4.0 BY-SA版权

分类专栏：工作笔记文章标签： js css vue elementui

本文链接：https://blog.youkuaiyun.com/weixin_38680881/article/details/117423591

工作笔记专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何通过CSS和JavaScript改进input[type=file]上传文件按钮的用户体验，包括隐藏input元素、调整样式和解决鼠标悬停问题。

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

利用input上传文件按钮优化

<el-button type="primary" class="btn" v-else>
    上传附件
<input
    class="input"
    type="file"
    accept="*.*"
    ref="file"
    title=""
    @change="uploadFile"
/>
</el-button>

.btn{
    position: relative;
    .input {
        position: absolute;
        top: 0;
        left: 0;
        width: 130px;
        height: 40px;
        opacity: 0; //覆盖input框原来的样式
        cursor: pointer;
        box-sizing: border-box;
        padding: 20px; //解决鼠标移上小手无效的问题
    }
}