type="file"的input框样式应该如何操作


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来type="file"的input框样式应该如何操作,操作type="file"的input框样式的注意事项有哪些,下面就是实战案例,一起来看一下。

关于type="file"的input是啥?

这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传,反正比以前好玩多了。

并且以前是只能上传一个文件,现在的话,只要增加multiple属性就可以上传多个文件,并且还有很多的文件格式支持,废话不多说,具体请看

玩过CSS的人朋友都知道,在HTML元素中,表单控件元素的样式修改是最痛苦的,很多控件的样式是跟着系统主题来改变的,想要去修改的话,只能模拟来实现,尤其尤其是在IE浏览器中。

对于type="file"这个上传按钮,曾经我们修改他的样式,有人用过模拟的方式,但据说用模拟的方式有可能会出现什么所谓的安全性问题,好吧,这对于我这样的一个页面仔,切图仔而言,不懂,就算懂了也不知道怎么去处理。那就不模拟吧……

可是不模拟的话,又要怎么修改样式呢?

图片定位叠加方案

之前的之前,我所知道的方法,其实大家也都知道的方法,就是通过将type="file"这个上传按钮透明后,然后叠加在一个图片上,这样就可以让人感觉是通过点击上传图片后实现的,也不用看那个原生的上传按钮了。

1

<input type="file" id="upfile" ><span ></span>.up_icon,.up_input {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;z-index: 2}.up_icon {overflow: hidden;font-size: 0;line-height: 99em;background: url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;z-index: 1;}

在这个代码应该很清晰可以看到实现的方式,通过定位的方式将上传按钮定位在图片之上,图片可以作为一个空标签的背景图片,然后把上传按钮的opacity透明度设置为0之后就看不到这个按钮了,但是实际是存在的,然后……然后……就没有然后了,效果就有了……

针对webkit的方案

这个针对webkit内核的方案其实有点扯,没多少实际用处,因为只有对webkit内核有效,如果不支持带-webkit-前缀的写法,就没任何效果了,所以各位看官就当娱乐一下看看吧。

阅读剩余部分

相关阅读 >>

html5 input输入实时检测以及延时优化

html input标签的属性有哪些?input标签的name属性介绍

html input怎么设置不可编辑

html中input标签的属性有哪些

html如何让input隐藏

jquery如何判断input是否被禁用

html中<input>标签的class属性的值及其使用方法总结

input的placeholder样式设置

谷歌浏览的label与input间距问题应该如何解决

html5 input number是什么?html5 input type的详细介绍(内附属性图)

更多相关阅读请进入《input》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...