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. vijos-1382 寻找主人

    题意: 给出两个同样长度的数字串: 求两个串是否本质同样.同样则输出最小表示. 长度L似乎给的不正确,大概是2000000左右吧: 题解: 最小表示法裸题.证明正确性啥的详见论文吧: 这东西大体的思路 ...

  2. php设计模式之工厂方法模式

    php设计模式之工厂方法模式 工厂方法模式 工厂方法模式(Factory Method Pattern)又称为工厂模式,也叫虚拟构造器(Virtual Constructor)模式或者多态工厂(Pol ...

  3. JAXB xml与javaBean的转换

    转自:https://blog.csdn.net/lydong_/article/details/79812626 `1. 1.不认识到犯错,然后得到永久的教训. 也不是所谓的教训吧,真正的教训来自于 ...

  4. correct ways to define variables in python

    http://stackoverflow.com/questions/9056957/correct-way-to-define-class-variables-in-python later say ...

  5. springMVC下ajax获取后台参数直接走错误或者报406错误问题解决

    直接走错误: 返回的结果是否json化,直接返回非字符串的结果会走ajax的error函数. 报406错误: 我在学习springmvc过程中(我的项目是配置的后缀是.html),从controlle ...

  6. MyBatis数据持久化(三)增删改查

    上篇文章中我们使用mybatis成功建立数据库会话,并从表中查询出相应的数据,本文在此基础上介绍MyBatis另外几种操作,即插入.修改.删除记录. 1.修改User.xml文件,增加几条sql语句: ...

  7. QT笔记 -- (6) opengl

    参考 http://blog.csdn.net/myths_0/article/details/24431597 用glut绘制一个茶壶 一句话,继承QGLWidget,实现下面三个函数,用子类定义窗 ...

  8. pic减法进位问题

    1.pic指令中subwf是 F - Wreg,且如果F>=Wreg,则C=1:如果F<Wreg,则C=0:这是由于pic的减法是加上减数的补码实现的.例如3-2,其实是3+FE=01,进 ...

  9. Python开发的简单记事本

    ---恢复内容开始---               主要是利用python 自带的tkinter 库    程序的基于python3.0以上 ,各个平台都可以使用包括linux ,windows , ...

  10. syn攻击原理与防护措施

    何为syn攻击? 先普及下tcp3次握手的知识,在TCP/IP中,tcp协议提供可靠的socket连接服务,通过3次握手建立可靠连接. tcp3次握手过程: 第一阶段:某终端向服务器发送syn(syn ...