关于H5中 input消除默认,取消在手机上的点击高亮效果
input消除默认,代码如下
input{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
-webkit-appearance:none;
outline: none;
border: none;
}
其中-webkit-appearance:none;用来改变按钮在iPhone下的默认风格; //消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式 。 注意:不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失。
对于 -webkit-tap-highlight-color ,这个属性是指点击元素显示高亮,(input和a元素或者是可以点击的元素在手机端点击)当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景,用户体验不好。
要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。
示例:设置高亮色为50%透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
浏览器支持: 只有iOS(iPhone和iPad).
注:如果页面可以点击元素需要自定义设置高亮颜色,而-webkit-tap-highlight-color我们没有做处理,我们自定义设置的高亮颜色就会被这个-webkit-tap-highlight-color默认样式覆盖显示高亮颜色。