方法一(推荐方式)
将 input[type=file] 元素隐藏 指定一个 ID
使用 label 元素自定义按钮样式设置 for 属性为 input[type=file] 设置的 ID 即可
优势:简洁、不需要依靠脚本
方法二(百度个人中心头像上传做法)
将 input[type=file] 元素透明度 (opacity) 设置为 0 绝对定位覆盖到按钮上 宽高与按钮一致
设置 font-size: 0 和 text-indent: -9999px 去除默认按钮 否则鼠标样式 (cursor) 永远为 default
设置 title=" " 去除鼠标移动到上方的文字
弊端:麻烦、伪类 :active、:hover 效果需要依靠父元素实现
方法三
设置 input[type=file] 元素隐藏 监听按钮点击事件
在事件处理函数中手动触发 input[type=file] 元素的 click 事件
网友评论