移动端常用样式设置

-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

欢迎补充指正!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值