美文网首页
上传文件按钮的显示问题

上传文件按钮的显示问题

作者: Amfishers | 来源:发表于2018-03-20 16:07 被阅读8次

    方法一(推荐方式)
    将 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 事件

    相关文章

      网友评论

          本文标题:上传文件按钮的显示问题

          本文链接:https://www.haomeiwen.com/subject/sbsbqftx.html