• 技术文章 >web前端 >css教程

    html+css如何实现自定义图片上传按钮

    醉折花枝作酒筹醉折花枝作酒筹2021-04-21 09:49:59转载400
    本篇文章给大家详细介绍一下html+css实现自定义图片上传按钮的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    自定义上传图片按钮

    普通的input[type=‘file’]的效果很朴素

    普通的file效果
    可以自定义一个file选择文件的按钮:

    思路为:

    用定位将自定义的按钮遮住原来的选择文件按钮,再让点击自定义按钮时触发原来的选择文件按钮的事件即可(对此,label可实现)

    eg:

    html:

    自定义选择文件按钮替换原按钮布局

    css样式:

    自定义选择文件按钮CSS样式布局

    结果图:

    自定义选择图片按钮

    点击“选择图片”按钮,则会触发选择图片的事件,你就可以选择图片啦!

    以上,是用bootstrap实现的,原生的如下:

    html:

    原生自定义文件上传按钮html

    CSS:

    原生自定义文件上传按钮CSS

    效果图:

    原生自定义文件上传按钮的效果图

    点一下,就可以弹出选择文件的文件夹啦!

    推荐学习:css视频教程

    以上就是html+css如何实现自定义图片上传按钮的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:css 上传图片
    上一篇:深入了解CSS中的@property特性 下一篇:css如何设置浮动
    大前端线上培训班

    相关文章推荐

    • css如何去掉背景色• css如何实现背景透明,文字不透明?• css如何去掉阴影• css 背景颜色怎么设置• 深入了解CSS中的@property特性

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网