在苹果 iphone 手机的 ios 系统下修改 button 按钮的默认 css 样式

学习笔记 马富天 2017-07-26 09:27:47 226 0

【摘要】有段时间我常常用手机访问自己的博客,但是总发有几处前端 css 样式做的不好,例如 button 的默认样式,本来我在 PC 端就设置好了它的 CSS 样式,已到了手机端访问它的样式就发生了变化,开始我以为就是因为手机的问题,后来才发现是苹果 iphone 手机的ios 系统同下面才会显示不同,本文记录一下如何解决此问题。

首先,查看问题:

请输入图片名称

图中所显示的是一个 input 类的表单,它的源代码是:

  1. <input type="button" value="订阅" id="subscribe-btn" class="sub-btn">
  2. // CSS 样式是:
  3. .item-tbl .sub-btn {
  4.     height: 30px;
  5.     line-height: 30px;
  6.     width: 60px;
  7.     background-color: #eee;
  8.     border-radius: 4px;
  9.     cursor: pointer;
  10.     border: 1px solid #BABABA;
  11.     font-family: "Microsoft YaHei";
  12. }

在 PC 端和安卓手机下面是能够正常显示的,而一旦到了苹果 iphone 手机下面就发生了变化。那么如何解决这个问题呢,请看:

  1. //	只要在样式里面加一句去掉iPhone、iPad的默认按钮样式就可以了!~
  2. input[type="button"], input[type="submit"], input[type="reset"]
  3. {
  4. 	appearance:none;	/* 所有主流浏览器都不支持 appearance 属性 */
  5. 	-moz-appearance:none;	/* Firefox 支持替代的 -moz-appearance 属性 */
  6. 	-webkit-appearance:none; /* Safari 和 Chrome 支持替代的 -webkit-appearance 属性 */
  7. }
  8. input[type="text"],input[type="password"]
  9. {
  10. 	-webkit-border-radius:0px;	/* 去掉 input[type="text"] 等等默认 border-radius 圆角 */
  11. }
  12. textarea
  13. {
  14. 	-webkit-appearance:none;
  15. }

appearance 属性是指允许您使元素看上去像标准的用户界面元素。

appearance: normal|icon|window|button|menu|field;

normal:将元素呈现为常规元素。

icon:将元素呈现为图标(小图片)。

window:将元素呈现为视口。

button:将元素呈现为按钮。

menu:将元素呈现为一套供用户选择的选项。

field:将元素呈现为输入字段。

这样当我们将 button 的 CSS 样式设置成 -webkit-appearance:none 的时候,Safari 下将不再显示 button 的默认样式,会调用用户自定义的样式。如下图:

请输入图片名称

版权归 马富天PHP博客 所有

本文标题:《在苹果 iphone 手机的 ios 系统下修改 button 按钮的默认 css 样式》

本文链接地址:http://www.mafutian.net/290.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

4

0

上一篇《 webkit 内核的浏览器滚动条 css 样式 》 下一篇《 百度联盟广告 js 代码多次重复引入解决办法,百度联盟广告异步加载 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多