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默认样式覆盖显示高亮颜色。

关于H5中 input消除默认,取消在手机上的点击高亮效果的更多相关文章

  1. H5中 input消除默认,取消在手机上的点击高亮效果

    input消除默认,代码如下    input{             -webkit-tap-highlight-color: rgba(255, 255, 255, 0);            ...

  2. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  3. H5中input[type="date"]默认样式修改 伪类

  4. 点击input消除默认背景颜色:focus

    1.在谷歌浏览器会出现默认点击input框黄色背景,如何去除? //消除google浏览器黄色框 input:-webkit-autofill, input:-webkit-autofill:hove ...

  5. h5中input的request属性提示文字字段

    <input type="password" class="form-control" name="passWord" require ...

  6. H5中input输入框tppe为date时赋值(回显)

    1.当时间为2013-09-05时正常显示 <input class="form-control" name="applytime" type=" ...

  7. fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)

    FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...

  8. fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

    之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...

  9. 从web图片裁剪出发:了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

随机推荐

  1. [Android] Android开发优化之——对界面UI的优化(1)

    在Android应用开发过程中,屏幕上控件的布局代码和程序的逻辑代码通常是分开的.界面的布局代码是放在一个独立的xml文件中的,这个文件里面是树型组织的,控制着页面的布局.通常,在这个页面中会用到很多 ...

  2. iOS CoreData 介绍和使用(以及一些注意事项)

    iOS CoreData介绍和使用(以及一些注意事项) 最近花了一点时间整理了一下CoreData,对于经常使用SQLite的我来说,用这个真的有点用不惯,个人觉得实在是没发现什么亮点,不喜勿喷啊.不 ...

  3. Recovering unassigned shards on elasticsearch 2.x——副本shard可以设置replica为0在设置回来

    Recovering unassigned shards on elasticsearch 2.x 摘自:https://z0z0.me/recovering-unassigned-shards-on ...

  4. Ubuntu16.04下Mongodb官网卸载部署步骤(图文详解)(博主推荐)

    不多说,直接上干货! 前期博客 Ubuntu16.04下Mongodb官网安装部署步骤(图文详解)(博主推荐) https://docs.mongodb.com/manual/tutorial/ins ...

  5. Shiro授权认证原理和流程

    先来张图: 这是一张shiro的功能图: Authentication: 身份认证/登录,验证用户是否拥有相应的身份 Authorization: 授权/权限验证,验证某个已认证的用户是否拥有某个权限 ...

  6. Android封装类似微信的顶部TitleBar弹出的PopupWindow代码

    Android仿微信顶部titlebar,点击加号弹出的PopupWindow,是封装好的PopupWindow,直接拿来用即可,先看效果图:  调用代码非常简单,这是MainActivity的代码: ...

  7. (转载)BeanUtils.copyProperties() 用法

    BeanUtils.copyProperties() 用法 标签: hibernateuserjdbc数据库strutsjava 2009-10-17 23:04 35498人阅读 评论(6) 收藏  ...

  8. 根据SPID查找SQL语句

      SELECT   /*+ ORDERED */          sql_text     FROM v$sqltext a    WHERE (a.hash_value, a.address) ...

  9. [APIO2012]派遣 可并堆(左偏树)

    没啥说的,自底向上合并大根堆即可. 一边合并,一边贪心弹堆顶直到堆的总和不大于预算. Code: #include <cstdio> #include <algorithm> ...

  10. 注解形式读取properties文件中的属性

    1.spring.xml中加入(多个properties 用逗号隔开)  <context:property-placeholder location="classpath:jdbc. ...