修复iPhone上submit按钮bug

今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——"表单中的input type=submit和input type=reset按钮在iPhone的safari浏览器下圆角有一个bug”很是疑惑,于是搜集整理一番,下面我来简单的描述一下这个bug的样子 自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type=&q

由爱到痛 有道云笔记是个好东西,在认识它之前,我一直使用Windows记事本来保存网上摘抄的文档资料和学习心得体会.某天朋友推荐了有道云笔记,我安装后就不可收拾的爱上了它.那种感觉,就好比一夜之间手扶拖拉机换成了奥迪Q7,从此驶上了码字界的康庄大道. 可就在我对它的爱如火如荼的进行中时,一件痛心疾首的事情发生了. 宋体,是我钟爱的字体,而有道云笔记钟爱的字体则是微软雅黑.就是那么一个兴趣爱好的不同,使我们之间产生了矛盾,并不断被激化,最终影响到了工作和生活,以至于之后一度要和它分手. 问题是这样

标题可能说的有点浮夸了0.o 在以前做页面的时候,是将form表单中的提交按钮写成 <input type="submit" /> 但是,总是觉得没有a标签设置样式好用,所以写了这样一个js函数来实现将a标签转换为submit按钮. 先上码: js代码: // 将a标签可用于表单(form)的提交js函数 //适用于一个form中有多个submit情况 function tosubmit(action_str){ var myform=document.getElement

如果给按钮定义 :hover 样式,在 iPhone 上按钮点击一次是 hover 态,再点击一次 hover 态才会消失,这不是我们想要的,继而想通过定义 :active 样式来实现按钮按下时的效果,但定义的 active 样式在 iPhone 上点击时没有任何效果 只需添加一段 js 即可: document.addEventListener("touchstart", function() {},false); 另一个方案,可以在 body 上添加 ontouchstart=&q

最近在做项目的时候,发现iphone上中 <input type="button">在修改了css样式之后还是保留自带的一些属性,然后在安卓手机上不会出现这样的问题, 在网上找了一些资料, 使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路, 使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说, 你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染

如果我们把input的type设置为submit,是的,提交表单经常需要submit按钮,就像下面这样: .代码 <inputtype="submit"class="button"value="登录"/> 你会发现submit初始状态就是这种焦点获取的黑框样式:精心开发5年的UI前端框架! 怎么办?如果设置border:none,也就是说不要border,那么这种黑框就没 有了,所以有种解决办法是直接把框写死到背景上,然后去除bord

1.  Google chrome 浏览器在52版本之后出现一个bug,就是点击 input file上传按钮时反应很慢,需要等待3-5秒种之后才能弹出选择文件的对话框.比如 windows里可能是这样: MAC里可能是这样:

遇到了 WebUploader 插件的上传按钮点击无效(此时鼠标在按钮任何位置时,按钮都没变化).按F12 之后才有反应(此时鼠标在按钮任何位置时,按钮颜色都会变深) 的问题,网上查到一些答案,找到了一种测试有效的办法. 首先出现Bug的原因是插件生成[选择文件]按钮的长宽都是0,所以点击不到:需要重新渲染一下网页,而F12正好有渲染网页的功能. 解决办法分以下两步: 1)在页面加一段样式: <style> #filePicker div:nth-child(2){width:100%!imp

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 代码如下: DOM结构: <a href="javascript:;" class="a-upload"> <input type=