本文介绍了如何修改input[type='file']的样式，以隐藏默认样式并显示自定义按钮。提供了两种方法：1. 使用CSS，通过设置font-size为0并调整宽高来创建可触发的文件选择区域，同时处理cursor:pointer效果；2. 使用JavaScript，隐藏input按钮，通过另一个可见按钮的点击事件触发文件选择。
问题说明
一般input[type=”file”]都不会采用默认样式，因此需要将真正起作用的隐藏掉，显示一个设计出的按钮样式。隐藏的方法有2种，一种是visibility:hidden，一种是opacity:0。visibility:hidden会给元素留有位置，但是通过点击无法触发事件。一般按钮上划上去时要添加cursor:pointer，但是在input[type=”file”]默认按钮上不会生效。
css解决方案
- 设置input[type=”file”]的font-size为0，这时，按钮在谷歌浏览器中就会变成一个19*6大小没有内容的方块，并不知道里面有什么撑起内容，如下图所示。
- 设置input[type=”file”]的宽高就可以得到一个可以触发选择文件的区域
- 在该区域下方设置按钮样式，因为上方透明，因此显示出下方样式，并给input添加cursor:pointer，因为19*6大小的区域仍残留input[type=”file”]默认按钮，该区域划上去不会有鼠标变小手的效果，因此，通过设置相对位置，将其移出按钮范围，并设置overflow:hidden。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
最低0.47元/天 解锁文章
5935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
