-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
欢迎补充指正!