CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式


Posted in HTML / CSS onOctober 11, 2014

今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子:

初载入页面后,表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子:

CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
奇怪的是你点击以后就会正常:

CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式

或许很多同学会认为我的样式代码没写好,那么想让大家知道是怎么一回事,先来看看我写的代码:

input[type="submit"]和input[type="reset"]样式代码:

复制代码
代码如下:
.form-actions input{
width: 30%;
cursor: pointer;
background: rgb(61, 157, 179);
padding: 8px 5px;
font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
color: #fff;
font-size: 24px;
margin: 5px;
border: 1px solid rgb(28, 108, 122);
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.form-actions input:hover{
background: rgb(74, 179, 198);
}
.form-actions input:active,
.form-actions input:focus{
background: rgb(40, 137, 154);
position: relative;
top: 1px;
border: 1px solid rgb(12, 76, 87);
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}

这样的代码在浏览器中浏览是完全没有问题的:

注:请使用safari测试上面代码。
可是上面的代码就在iPhone的Safari浏览器下出开头所陈述的问题。一下真不好如何动手解决,因为从来没有接触过,所以就一直没有碰到过。 但问题出了,就要想办法解决,于是在GG上搜索“input submit for iPhone”,还真找到了问题所在。 Keir Whitaker 在Styling Submit Buttons for Mobile Safari 中介绍的内容和我碰到的问题可真是一模一样,按其方法在样式中加入:



复制代码代码如下:
.form-actions input{
 ...
 -webkit-appearance: none;
 }
更新到iPhone一看,真爽,问题解决了。

原来问题出在这里,iPhone上的safari解析input[type="submit"]和input[type="reset"]按钮会以 苹果浏览器的默认UI渲染,这样就出现我刚才那种现像,我们在样式中明确的设置了button的圆角值,但到iPhone的safari上就不生效了。要 想让他生效,就需要在样式中明确的指名:



复制代码代码如下:
.form-actions input{
 ... 
 -webkit-appearance: none;  }
在不同的“-webkit-appearance”选值情况下,button所渲染的效果是不一样的,详细的测试代码大家可使用safari浏览器点击这 里。有关于“-webkit-appearance”的详细介绍,这回算是知道了,最后我建议大家,我们可以直接在“reset.css”样式文件中加处 这么一句:



复制代码代码如下:
input[type="submit"],
 input[type="reset"],
 input[type="button"],
 button { -webkit-appearance: none; }
这样一来就不会为这样的问题头痛了。
如果你还没有碰到,或者你也在开发移动端web,都希望你记住这个小技巧,因为当你在制作中碰到这样的问题时,不会为此抓破头皮,能解决你问题。最后希望大家喜欢这篇文章,如果你觉得对你有所帮助,可以推荐给你的朋友,谢谢阅读。
HTML / CSS 相关文章推荐
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 #HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 #HTML / CSS
css3 transform属性详解
Sep 30 #HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 #HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 #HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 #HTML / CSS
You might like
PHP源代码数组统计count分析
2011/08/02 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP curl使用实例
2015/07/02 PHP
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
用原生js做单页应用
2017/01/17 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
js实现简单五子棋游戏
2020/05/28 Javascript
Python 基础之字符串string详解及实例
2017/04/01 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
Python自动创建Excel并获取内容
2020/09/16 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
数学高效课堂实施方案
2014/03/29 职场文书
会计系毕业生求职信
2014/05/28 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
应用外语系自荐信
2014/06/26 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
人民币符号
2022/02/17 杂记
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android
Fluentd搭建日志收集服务
2022/09/23 Servers