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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python单链表的简单实现方法
2014/09/23 Python
python中MySQLdb模块用法实例
2014/11/10 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
python3实现字符串操作的实例代码
2019/04/16 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
银行出纳岗位职责
2013/11/25 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
财务负责人任命书
2014/06/06 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
小学运动会前导词
2015/07/20 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
教师素质教育心得体会
2016/01/19 职场文书
python用字节处理文件实例讲解
2021/04/13 Python