分享好友 教程首页 教程搜索 频道列表

修复iPhone的safari浏览器上submit按钮圆角bug

2021-06-23 22:492900
+关注2
核心提示:自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在...

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


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


奇怪的是你点击以后就会正常:


对比一下,你也会觉得怪,怪都算了,还不知道如何下手:


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


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;      
 }


告诉浏览器我们不希望按钮按苹果的默认UI来渲染。


那么"-webkit-appearance"对button还有什么影响呢?大家可以参考下面的截图:


上图所显示的效果,都将button设置了:

  .button {
   border-radius: 0;
  }


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

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button {
   -webkit-appearance: none;
  }


这样一来就不会为这样的问题头痛了。

本文标签: #圆角 #苹果 #css
整理员:网络
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

HTML5+CSS3+JS实例之带标题描述的圆角图片手风琴效果

    圆角图片手风琴效果

小黑 HTML教程2024-03-26

在css中使用outline圆角效果

    outline 属性在默认情况下是不支持圆角设置的,但可以通过 box-shadow 属性来模拟出类似于带有圆角的 outline 效果。以下是示例代码:

小黑 CSS教程2023-04-12

圆角边框的css属性

网络转载 CSS教程2022-08-28

CSS3实现圆角、阴影、透明效果并兼容各大浏览器

    圆角、阴影、透明的实现方法有很多,之前的获取比较复杂,用CSS3就方便很多了,而且对浏览器的支持性也比较好,下面简单为大家介绍下CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了. 复

小黑 网页特效2016-03-11

纯CSS3实现圆角效果(含IE兼容解决方法)

    CSS3圆角技术能非常好的美化你的页面效果,而且避免了使用图片辅助,一则省去了制作图片的时间,二则省去了浏览器加载图片造成的延迟和带宽如今,这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持,包括Safari,谷歌浏览器,IE,Opera和火狐浏览器。下面让我们来看看border-radius的语法,解释,以及IE是如何支持它的。语法和说明 在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似:复制代码 代码如下:.roundElemen

小黑 网页特效2016-03-11

下一篇
我来说两句
抢沙发