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

【摘要】有段时间我常常用手机访问自己的博客，但是总发有几处前端 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. }

9. input[type="text"],input[type="password"]

10. {

11. 	-webkit-border-radius:0px;	/* 去掉 input[type="text"] 等等默认 border-radius 圆角 */

12. }

14. textarea

15. {

16. 	-webkit-appearance:none;

17. }

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

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

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

icon：将元素呈现为图标（小图片）。

window：将元素呈现为视口。

button：将元素呈现为按钮。

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

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

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

我要打赏