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. 怎样訪问pcie整个4k的配置空间

    眼下用于訪问PCIe配置空间寄存器的方法须要追溯到原始的PCI规范. 为了发起PCI总线配置周期,Intel实现的PCI规范使用IO空间的CF8h和CFCh来分别作为索引和数据寄存器,这样的方法能够訪 ...

  2. m_Orchestrate learning system---十一、thinkphp查看临时文件的好处是什么

    m_Orchestrate learning system---十一.thinkphp查看临时文件的好处是什么 一.总结 一句话总结:可以知道thinkphp的标签被smarty引擎翻译而来的php代 ...

  3. [jzoj 5930] [NOIP2018模拟10.26】山花 解题报告 (质因数分类)

    题目链接: http://172.16.0.132/senior/#contest/show/2538/2 题目: 小S决定从某一个节点$u$开始对其子树中与$u$距离小于$K$的节点代表的花树进行采 ...

  4. Scalable, Distributed Systems Using Akka, Spring Boot, DDD, and Java--转

    原文地址:https://dzone.com/articles/scalable-distributed-systems-using-akka-spring-boot-ddd-and-java Whe ...

  5. 关于JQuery中的事件冒泡

    什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...

  6. Tomcat学习(一)——使用Eclipse绑定Tomcat并发布应用

    1.下载Tomcat 官网地址:http://tomcat.apache.org/whichversion.html 2.目录结构 bin:脚本目录 启动脚本:startup.bat 停止脚本:shu ...

  7. 《鸟哥的Linux私房菜》笔记——01. 计算机概论

    计算机的五大部分:输入单元.输出单元.CPU(控制单元(Control Unit).算数逻辑单元(ALU)).内存. CPU 的架构 精简指令集(Reduced Instruction Set Com ...

  8. 3ds Max制作妄想中的外星人形象

    来源:CG游 作者:FedericoScarbini 使用软件:3ds Max, Photoshop, ZBrush 简介 我认为每一个人都曾经在他的人生中的某些时刻妄想着关于外星人的事情;我猜这是很 ...

  9. Debian9.5系统DHCP服务器ISC DHCP软件配置说明

    DHCP 全称Dynamic Host configuration protocol, 动态主机配置协议.是一个局域网的网络协议,使用UDP协议工作,它可以为客户机自动分配IP地址.子网掩码以及缺省网 ...

  10. vue 键盘监听事件

    <template> <div class="hello"> <input v-on:keyup.enter="submit" t ...