使用透明效果来自定义文件上传按钮控件样式,
分类:计算机知识

解决方法

问题来了,既想要弹出层的炫酷效果,又想自定义控件在界面显示的样式。怎么办呢?露珠曾经尝试过最简单的方法去重写css去改变它们的样式,但是即使在google若干小时,也没有找到满意的结果。露珠也尝试过-webkit-appearance属性,但它也显得不尽如人意。况且我们还需要兼容多机型(安卓,苹果,wp?)。无论如何,走改变原始样式的路是行不通的。露珠经过一番思考,找到了自认为非常好的解决方法,也是这篇博文的主题:既然控件在页面的样式不可以改变,那就隐藏它,但是!不是用display:none隐藏,也不是把width和height设置为0,我们希望的是看不到它们的原始样式,而希望保留对它们的tap和focus事件。但是除了以上的方法,还有什么能使它们看不见呢?聪明的你一定想到了,对,就是opacit:0, 通过将控件的不透明度设置为0,我们可以让元素继续让它留在界面上,并且保持随时响应focus事件的状态。我们要做的,是为该控件设置为绝对定位,覆盖在我们自定义样式的一个element上。这样,用户看到的是底下的element,但当他的手去触碰此element时,他实际触碰的是完全透明确留在界面上的原生控件!如下图所示:

图片 1

这还是第一步,接下来我们需要为控件绑定响应事件,大多数情况下我们需要绑定的事件都是onchange,一旦选择完成,就把值复制到自定义的element上去。这样大功告成了!不管你是通过表单或者post提交,你取到的值依然是控件的值,自定义的element只负责显示,不负责业务!

图片 2

upload...

论如何在手机端web前端实现自定义原生控件的样式

2015/10/30 · HTML5 · 原生控件

原文出处: 卖烧烤夫斯基   

手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式。首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样:

android:

图片 3

ios:

图片 4

复制代码 代码如下:

结束语

产品B君看到了丑陋的东西消失了,ios下的滚筒又炫酷滚起来了,肯定会拍拍你的肩膀说兄弟干得不错。这篇博文也不仅仅是关于解决控件样式的问题,在其他类似的情况下,用遮罩层的方法掩盖你无能为力的地方是值得借鉴的。其实在开发中类似的的小花招很多,只要找到了诀窍和方法,一行代码抵得上一万行代码(借用刘震云的小说名)。虽然是个很小的小花招,大篇幅的用一篇博客来讲解是过于夸张和繁琐,不过前端开发事无巨细,希望对遇到类似问题或者将来需要解决的同学有帮助。

1 赞 收藏 评论

图片 5

1、在比较旧的浏览器中(比如IE9及以下,不支持 fileAPI,不支持 XMLHttprequest level2 只能用表单post文件)上传图片时,只能使用 表单 post,处于安全上的考虑,input[type="file"] 的文件选择按钮样式并不能随意修改(不过可以修改input 的透明度),可能会跟设计师的设计格格不入,这时可以使用透明效果来自定义上传按钮。
2、控件宽度最好不要超过60px,因为file控件浏览按钮的宽度无法修改,在firefox下约为60px。如果超出60px,不要设置控件的鼠标样式,由于firefox下file控件的鼠标样式只在浏览按钮上生效,如果设置鼠标样式会造成控件左边和右边样式不一致。
3、控件文字显示层的行高与控件容器层的高度保持一致以保证文字垂直居中。
4、由于安全性问题,文件上传控件必须使用鼠标点击浏览按钮弹出文件选择窗并选择文件,才能向服务器上传文件(不支持 file API ),通过js触发file控件的click() 事件来弹出文件选择窗然后选择文件的方式是无法上传文件的,因此必须使file控件覆盖在文字显示层上面,将file控件样式设置为透明来显示下面的文字层。
5、xmlhttprequest组件(level1 , level 2已经支持二进制数据上传和跨域)是无法上传文件的,异步上传文件需要使用 iframe 引入上传控件使用 表单 post 数据,可以把文件上传功能单独放在iframe内实现,也可以仅仅把处理图片上传的服务器脚本指定在iframe内打开 (设置form表单的 target 指向 iframe 窗口)。

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:使用透明效果来自定义文件上传按钮控件样式,

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文