移动端常用样式设置

-webkit-tap-highlight-color

点击一个链接或者有事件监听的元素被点击的时候会被高亮显示, 解决方式

body {
-webkit-tap-highlight-color: transparent;

/* 或者如下也是同样的效果 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

改写iOS Safari中可点击元素的高亮颜色。该属性可以只设置透明度。

如果未设置透明度，iOS Safari使用默认的透明度。

当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

除了iOS Safari，大部分android手机也是支持的，只是显示效果有所不同。

-webkit-appearance

/* 除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 */
input, textarea {
-webkit-appearance: none;
}

不同type的input使用这个属性之后表现不一。

text、button无样式，radio、checkbox直接消失、

另外，select加上这个属性后，select的高度就可以改变了。

如：select{-webkit-appearance:none;}

-webkit-user-select

body {

/* 禁止页面文字被选中 */
-webkit-user-select: none;
}

-webkit-touch-callout

body {

/* 禁用长按页面时的弹出菜单(iOS下有效), img和a标签都要加 */
-webkit-touch-callout: none;
}

-webkit-overflow-scrolling

body {

/*  局部滚动(仅iOS5 以上支持) */
-webkit-overflow-scrolling: touch;
}

outline

:focus {

/* 防止在获得焦点时, 出现边框 */
outline: none;
-webkit-tap-highlight-color:transparent
}

参考:

http://ued.ctrip.com/webkitcss/prop/tap-highlight-color.html

http://slimcheng.com/archives/179

http://www.jianshu.com/p/d675e21126b7

欢迎补充指正!