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

时间：2023-03-30 23:51:34 CSS

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

/*css代码*//*第一个按钮样式*/.first{position:relative;高度：30px；line-height:30px;}.firstbutton,.firstinput{position:absolute;左：85px；顶部：0；宽度：100px；高度：30px；颜色：天蓝色；边界半径：5px；边框：无；大纲：无；游标：指针；}.fi第一个输入{不透明度：0;宽度：185px；left:0;/*这是为了让光标效果在按钮中完全生效，但缺点是宽度增加，可以点击按钮左侧不可见的位置*/}方法二上传图片

/*css代码*//*第二个按钮样式*/.item标签{display:inline-block;宽度：100px；高度：30px；文本对齐：居中；颜色：#fff；行高：30px；背景颜色：天蓝色；边界半径：5px；cursor:pointer;}.iteminput{display:none;}第三种方式上传图片

/*css代码*//*第三种按钮样式*/.itembutton{width:100px;高度：30px；颜色：#fff；背景颜色：天蓝色；边界半径：5px；边框：无；大纲：无；cursor:pointer;}.iteminput{display:none;}//js代码//第三个方法document.querySelector('.btn').addEventListener('click',function(){document.querySelector('#file').click();});上面三种方法的样式都是一样的，如图：总结上面三种方法，推荐第三种方法，不推荐第一种原因：1.样式代码比较多，对于cursor，文件按钮不会应用样式，所以需要加宽，这样会出现不可见区域可以点击上传的bug（暂时还没有找到解决方法）2.结构是固定的。第三，你需要使用定位。不推荐的第二个原因：局限性：受限元素，只能使用labels，只能使用ids进行关联。id用作唯一标识符。页面上定义的id越少越好。如果要在同一个页面使用，需要定义多个id。第三条推荐理由：1.结构：风格简洁，结构清晰2.适用范围：对元素的使用没有限制，因为是和js动态绑定的当然以上纯属个人看法，如果有更好看欢迎在评论区留言讨论~