本网站(662p.com)打包出售,且带程序代码数据,662p.com域名,程序内核采用TP框架开发,需要联系扣扣:2360248666 /wx:lianweikj
精品域名一口价出售:1y1m.com(350元) ,6b7b.com(400元) , 5k5j.com(380元) , yayj.com(1800元), jiongzhun.com(1000元) , niuzen.com(2800元) , zennei.com(5000元)
需要联系扣扣:2360248666 /wx:lianweikj
html+css实现自定义图片上传按钮
追忆似水年华 · 576浏览 · 发布于2019-07-18 +关注

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

1.png


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

2.png


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

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


eg:

html:

3.png


css样式:

4.png

结果图:

5.png


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


原生的如下:

html:

6.png


CSS:

7.png



效果图:

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


相关推荐

RN开发环境的npm私库本地debug调试

manongba · 698浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理

追忆似水年华 · 1373浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式

追忆似水年华 · 999浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取

manongba · 717浏览 · 2019-06-10 09:16:16
10个省时间的 PyCharm 技巧 赶快收藏!

· 703浏览 · 2019-06-10 09:32:01
加载中

0评论

评论
分类专栏
小鸟云服务器
扫码进入手机网页