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

Warren 发布于2019-08-02 10:23 / 3005人阅读

摘要：第二种不推荐的理由局限性限制了元素，只能使用，且只能使用来进行关联，作为唯一标识，页面上定义的越少越好，想要在同一页面使用多个就需要定义多个。

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




    第一种方法
    
    


/*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效果在按钮内完全生效，但是弊端就是宽度增加，在按钮左侧看不见的位置也能点击到*/
}




    第二种方法
    上传图片
    


/*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;
}




    第三种方法
    
    


/*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();
});

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

总结上述三种方法比较推荐第三种，第一种不推荐的理由：

一、样式代码相对较多，并且对于cursor，file的按钮不会应用样式，所以需要让他宽度更宽才行，这样就会出现在不可见区域也能点击上传的bug（目前没找到解决办法）。

二、结构固定。

三、需要使用定位。

第二种不推荐的理由：

局限性：限制了元素，只能使用label，且只能使用id来进行关联，id作为唯一标识，页面上定义的id越少越好，想要在同一页面使用多个就需要定义多个id。

第三种推荐的理由：

一、结构：样式简单，结构清晰

二、适用范围：不限制元素的使用，因为是用js动态绑定的当然，上面的纯属个人观点，如果有更好的观点欢迎在评论区留言讨论~

超融合服务器混合云 vps日常维护中的一些要点总结关于样式的美化按钮关于文件的读写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52321.html

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

摘要：第二种不推荐的理由局限性限制了元素，只能使用，且只能使用来进行关联，作为唯一标识，页面上定义的越少越好，想要在同一页面使用多个就需要定义多个。最近在公司做项目遇到个需求，就是要做一个上传图片的功能，很简单的一个功能，但是在实现过程中却遇到了很多坑，在这里总结一下，让碰到此问题的朋友也可以有更多选择，以下所述纯属个人观点，如有不同的方法，欢迎在评论区留言交流，共同进步！ ...

paraller 2019-08-22 17:03 评论0 收藏0
关于文件上传按钮样式美化的一些总结

摘要：第二种不推荐的理由局限性限制了元素，只能使用，且只能使用来进行关联，作为唯一标识，页面上定义的越少越好，想要在同一页面使用多个就需要定义多个。最近在公司做项目遇到个需求，就是要做一个上传图片的功能，很简单的一个功能，但是在实现过程中却遇到了很多坑，在这里总结一下，让碰到此问题的朋友也可以有更多选择，以下所述纯属个人观点，如有不同的方法，欢迎在评论区留言交流，共同进步！ ...

EsgynChina 2019-08-29 15:19 评论0 收藏0
CSS美化上传按钮、checkbox和radio样式

摘要：思路美化思路是，先把之前的按钮透明度设置为然后，外层用包裹，就实现了美化功能。上传按钮美化代码如下样式一样式二点击这里上传文件选择文件结果样式一样式二美化代码如下背景图片样式结果美化代码如下背景图片样式结果思路：美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。 input[type=file]上传按钮美化代码如下：样式一： /*...

gghyoo 2019-08-29 13:14 评论0 收藏0
美化文件上传按钮自定义input file样式

摘要：的样式不能直接用来美化，我们可以曲线救国，把的透明度降低为，相当于把这个控件隐藏了，实际上只是透明度为，还是存在的，然后把套上去，让充当的按钮。 input file的样式不能直接用css来美化，我们可以曲线救国，把input file的透明度降低为0，相当于把这个控件隐藏了，实际上只是透明度为0，还是存在的，然后把div套上去，让div充当file的按钮。 showImg(https...

jkyin 2019-08-26 14:01 评论0 收藏0
美化文件上传按钮自定义input file样式

摘要：的样式不能直接用来美化，我们可以曲线救国，把的透明度降低为，相当于把这个控件隐藏了，实际上只是透明度为，还是存在的，然后把套上去，让充当的按钮。 input file的样式不能直接用css来美化，我们可以曲线救国，把input file的透明度降低为0，相当于把这个控件隐藏了，实际上只是透明度为0，还是存在的，然后把div套上去，让div充当file的按钮。 showImg(https...

jackzou 2019-08-30 15:44 评论0 收藏0