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. m_Orchestrate learning system---十九、局部变量和块变量是什么

    m_Orchestrate learning system---十九.局部变量和块变量是什么 一.总结 一句话总结:下面的global的使用情况可以很好的解释这个问题 这是在一个函数里面,只不过里面有 ...

  2. SaltStack介绍——SaltStack是一种新的基础设施管理方法开发软件,简单易部署,可伸缩的足以管理成千上万的服务器,和足够快的速度控制,与他们交流

    SaltStack介绍和架构解析 简介 SaltStack是一种新的基础设施管理方法开发软件,简单易部署,可伸缩的足以管理成千上万的服务器,和足够快的速度控制,与他们交流,以毫秒为单位.SaltSta ...

  3. 创建表空间及plsql查看远程表空间路径

    -新建表空间,登录名和密码 --请尽量把表空间和别的系统分离,这里以Search为例子,登录名和密码以test为例子 create tablespace Search logging datafile ...

  4. [luogu P3813] [FJOI2017] 矩阵填数 解题报告 (容斥原理)

    题目链接: https://www.luogu.org/problemnew/show/P3813 题目: 给定一个 h*w的矩阵,矩阵的行编号从上到下依次为 1..h,列编号从左到右依次1..w. ...

  5. 使用wpa_supplicant连接WIFI

    让树莓派可以开机就连接制定的wifi, 可以通过wpa_supplicant来实现. 在 /etc/wpa_supplicant 下写一个配置文件: wpa_supplicant.conf 内容如下: ...

  6. git工作中常用命令-工作中踩过的坑

    踩坑篇又来啦,这是我在工作中从git小白进化到现在工作中运用自如的过程中,踩过的坑,以及解决办法. 1.基于远程develop分支,建一个本地task分支,并切换到该task分支 git checko ...

  7. Win10运行在哪里,Win10的运行怎么打开

    方法/步骤 1 唯一的方法是同时按下WIN+X键组合,如下图所示 步骤阅读 2 在弹出菜单可以看到运行了!如下图所示 步骤阅读 3 运行对话框出来了,如下图所示 步骤阅读 4 还有一个方法,点击桌面左 ...

  8. Ubuntu 14.04下安装CUDA8.0

    配置环境如下: 系统:Ubuntu14.04 64bit 显卡:Nvidia K620M 显卡驱动:Nvidia-Linux-x86_64-375.66.run CUDA8.0 +  cudnn8.0 ...

  9. javascript实现自动添加文本框功能

    转自:http://www.cnblogs.com/damonlan/archive/2011/08/03/2126046.html 昨天,我们公司的网络小组决定为公司做一个内部的网站,主要是为员工比 ...

  10. Volatile variables

    Volatile variables apply another type of memory constraint to individual variables. The compiler oft ...