关于文件上传按钮样式美化的一些总结

最新推荐文章于 2024-08-05 23:02:44 发布

weixin_33939843

最新推荐文章于 2024-08-05 23:02:44 发布

阅读量1k

点赞数

文章标签： javascript php ViewUI

原文链接：https://segmentfault.com/a/1190000014771120

版权

最近在公司做项目遇到个需求，就是要做一个上传图片的功能，很简单的一个功能，但是在实现过程中却遇到了很多坑，在这里总结一下，让碰到此问题的朋友也可以有更多选择，以下所述纯属个人观点，如有不同的方法，欢迎在评论区留言交流，共同进步！
刚开始我的想法是直接用定位（position）+透明度（opacity）直接来实现，实现的过程很顺利，但是最后却发现了一个问题，什么问题呢，很简单，就是用户体验的问题，我想给这个按钮加一个鼠标移入变手的效果，却发现始终有一部分不会生效，检查代码发现原来是因为上传文件的按钮不会应用这个样式，那我我就想把他移出到按钮之外的位置，但是这样就会出现按钮超宽的问题，即使在看不见的部位也能点到，所以我就这个问题开始了一些实验，在网上也找过方法，发现都不是我想要的，最后决定自己来写一写，不研究不知道，一研究还发现了不少方法能实现，我总结除了三种实现的方法以及实现思路，希望对大家有帮助，如果还有其他的方法，请在评论区留言，共同学习，好了废话不多说，贴代码：

<!--html结构-->
<!--第一种方法:通过定位+透明度来实现（不推荐）-->
<div class="first">
    第一种方法
    <button>上传图片</button>
    <input type="file">
</div>

/*css代码*/
/*第一种的按钮样式*/
.first{
    position: relative;
    height: 30px;
    line-height: 30px;
}
.first button,.first input{
    position: absolute;
    left: 85px;
    top: 0;
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: skyblue;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
.first input{
    opacity: 0;
    width: 185px;
    left: 0;/*这里是为了让cursor效果在按钮内完全生效，但是弊端就是宽度增加，在按钮左侧看不见的位置也能点击到*/
}

<!--html结构-->
<!--第二种方法：通过label的关联属性来实现-->
<div class="item">
    第二种方法
    <label for="file1">上传图片</label>
    <input type="file" id="file1">
</div>

/*css代码*/
/*第二种的按钮样式*/
.item label{
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    color: #fff;
    line-height: 30px;
    background-color: skyblue;
    border-radius: 5px;
    cursor: pointer;
}
.item input{
    display: none;
}

<!--html结构-->
<!--第三种方法:通过js事件绑定来实现（推荐）-->
<div class="item">
    第三种方法
    <button class="btn">上传图片</button>
    <input type="file" id="file">
</div>

/*css代码*/
/*第三种的按钮样式*/
.item button{
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: skyblue;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
.item input{
    display: none;
}

// js代码
// 第三种方法
document.querySelector('.btn').addEventListener('click',function () {
    document.querySelector('#file').click();
});

上面三种方法的样式都是一样的，如图：
图片描述