如果给按钮定义 :hover 样式，在 iPhone 上按钮点击一次是 hover 态，再点击一次 hover 态才会消失，这不是我们想要的，继而想通过定义 :active 样式来实现按钮按下时的效果，但定义的 active 样式在 iPhone 上点击时没有任何效果

只需添加一段 js 即可：

document.addEventListener("touchstart", function() {},false);

另一个方案，可以在 body 上添加 ontouchstart=""

<body ontouchstart="">

原理：Safari 默认禁用了元素的 active 样式，我们通过声明 touchstart  来覆盖默认事件，就可以让 active  样式重新激活。

此外，默认点击按钮会有一个灰色的外框，通过这段 CSS 可以清除：

html {

	-webkit-tap-highlight-color: rgba(0,0,0,0);

}

5. iphone 的:active样式的更多相关文章

  1. 移动端bug~~移动端:active伪类无效的解决方法【移动端 ：active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  2. WPF 仿IPhone滑块开关 样式 - CheckBox

    原文:WPF 仿IPhone滑块开关 样式 - CheckBox <Style x:Key="CheckRadioFocusVisual"> <Setter Pr ...

  3. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  4. VUE 动态切换列表active样式

    参考VUE官方文档样式绑定 https://cn.vuejs.org/v2/guide/class-and-style.html 需求是动态加载出来了所有菜单列表,点击其中一个li元素改变这个元素的背 ...

  5. 去掉iphone 的圆角样式

    每次面对iphone这种丑丑的样式,我简直不能再愉快的写代码~~而且每次记不住那烦人的属性~~~必须记录下来~~ -webkit-appearance:none 为了下次不用再百度,终于背下来~~~

  6. 踩过的坑—iphone手机H5样式兼容总结

    对一个前端开发者来说,最煎熬的莫过于"兼容"两个字了(说到这个词朋友们是不是身体一抖),哪怕对于工作多年的老油条来讲,也不是完全了解各种场景下的兼容性处理方法.在这里我就把我在工作 ...

  7. vue active样式显示

    html:代码 <ul> <li @click="current='xxxx'" :class="{active:current=='xxxx'}&qu ...

  8. iScroll 4，把禁掉的:active样式还给我~

    iScroll这个移动端的滚动神器大家都非常熟悉了,直到现在仍是实现移动端Web滚动的首选方案之一... 当我接触移动端Web时iScroll已经有两个版本了,iScroll 4和iScroll 5, ...

  9. 【学习】苹果iPhone safari浏览器样式重置修复按钮圆角bug

    iPhone safari浏览器中,input按钮会按苹果的默认UI来渲染,例如,写的按钮明明是这个样的: 但是实际就会是这个样子: 怎么办呢? 为按钮添加:-webkit-appearance: n ...

随机推荐

  1. Mysql性能优化：什么是索引下推？

    导读 索引下推(index condition pushdown )简称ICP,在Mysql5.6的版本上推出,用于优化查询. 在不使用ICP的情况下,在使用非主键索引(又叫普通索引或者二级索引)进行 ...

  2. Electron 踩坑记录- require is not defined

    从 github 上拉取 electron-sample-apps 后,运行 electron printing, 出现如下报错信息 解决方案 在 main.js 中增加 nodeIntegratio ...

  3. Python第五章-内置数据结构02-列表

    Python 内置的数据结构 二.列表(list) 想一想: 前面学习的字符串可以用来存储一串信息,那么想一想,怎样存储咱们班所有同学的名字呢? 定义100个变量,每个变量存放一个学生的姓名可行吗?有 ...

  4. TensorFlow 模型优化工具包  —  训练后整型量化

    模型优化工具包是一套先进的技术工具包,可协助新手和高级开发者优化待部署和执行的机器学习模型.自推出该工具包以来,  我们一直努力降低机器学习模型量化的复杂性 (https://www.tensorfl ...

  5. 左手VS PK 右手IDEA

    近日愈发觉得编程是一件有趣的事. 三年前退伍时,还没有确定要继续干这行.去了北京之后,决定写代码吧.Why? 我是一个唯物主义者. 过去两年,一直抱有的念头是,怎么着也要至少干个三年,再寻求不写代码的 ...

  6. Jedis连接外部Redis

    Jedis连接外部Redis 1.在服务器开放端口redis默认6379,如果有宝塔面板则还需要在宝塔放行6379端口 2.修改redis.conf 注释掉 绑定IP 127.0.0.1 # bind ...

  7. MATLAB 一维随机变量及其概率分布

    1.两点分布 clc clear a=rand(1,10); for ii=1:10 if a(ii)<0.2 a(ii)=0; else a(ii)=1; end end a x=0的概率为0 ...

  8. Javascript/JQuery遇到的bug

    这次遇到一个js内部文件报错的,找了下不是我们的代码问题.我突然想到了,我使用的Umeditor有个内置的jquery,然后我也把它加到我们的项目里面,但是我查看了我们的项目,是引用过一个jquery ...

  9. CTR学习笔记&代码实现2-深度ctr模型 MLP->Wide&Deep

    背景 这一篇我们从基础的深度ctr模型谈起.我很喜欢Wide&Deep的框架感觉之后很多改进都可以纳入这个框架中.Wide负责样本中出现的频繁项挖掘,Deep负责样本中未出现的特征泛化.而后续 ...

  10. Spring的IOC操作

    Spring的IOC操作 把对象的创建交给spring ioc操作两个部分 (1)ioc的配置文件方式 (2)ioc基于注解的方式 IOC 的底层原理 1.ioc底层原理使用技术 (1)xml配置文件 ...