移动端开发-iPhoneiPad的默认按钮样式等开发经验

Posted 2021-05-02 码匠与HTML5学堂

html5学堂：从JS的逻辑层来说，移动端远远不如PC平台，但是“恐怖的”兼容问题是移动端最为头疼的地方。本文介绍iPad与iPhone的默认按钮样式的处理方法。关于兼容问题，我们很建议大家在开发的过程中记录下来，并定期整理总结。移动端很新，兼容问题也有很多是未知的，只有长期不断的积累才能够有所成长。

iPhone、iPad的按钮存在默认样式，如何去除默认样式呢？

1. input[type="button"], input[type="submit"], input[type="reset"] {

2. -webkit-appearance: none;

3. }

4. textarea { -webkit-appearance: none;}

在IE10下，当文本框输入内容后，在文本框的右侧会出现一个小叉叉

1. input::-ms-clear {

2. display: none;

3. }

去除浏览器文本框默认高光样式：

1. input:focus{

2. -webkit-tap-highlight-color:rgba(0,0,0,0);

3. -webkit-user-modify:read-write-plaintext-only;

4. }

注意：第一句是安卓4.0版本以下去除高光的方式，第二句代码时安卓4.0以上版本去除高光的方式。