100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html+css实现自定义图片上传按钮

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

时间:2024-04-30 13:18:34

相关推荐

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

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

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

关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。

思路为:

用定位将自定义的按钮遮住原来的选择文件按钮,

再让点击自定义按钮时触发原来的选择文件按钮的事件即可

(对此,label可实现)

效果图:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.btn{position: relative;display: inline-block;width: 75px;height: 25px;overflow: hidden;text-align: center;font-size: 14px;line-height: 25px;vertical-align: center;border: 1px solid #23c6c8;background-color: #23c6c8;color:#fff;border-radius: 3px;}.btn:hover{border: 1px solid #23babc;background-color: #23babc;}.btn input{position: absolute;top:0;left: 0;opacity: 0;}</style></head><body><label type="button" class="btn"><span>选择图片</span><input type="file"></label></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。