如果给按钮定义 :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. SQL server 2012安装教程

    转自:https://blog.csdn.net/u013162035/article/details/78567389 注]博主使用的是SQL Server2012 其他版本的安装类似.[第一步]下 ...

  2. Python第一章-编码规范

    Python的基础知识 一.编码规范 PEP8[^ 注] 编码规范 Guido的关键点之一是:代码更多是用来读而不是写.编码规范旨在改善Python代码的可读性. 风格指南强调一致性.项目.模块或函数 ...

  3. OLED的使用-4线SPI驱动

    一 .OLED屏 1.OLED屏(七针) 2.OLED电路图 3.0.96'OLED简介 该模块特点: 1.三色可选,模块有两种单色和黄蓝双色两种颜色可选,单色为纯白色和纯蓝色,双 色为黄蓝双色: 2 ...

  4. ES6语法：函数新特性（一）

    ES6 函数 引言: 函数在任何语言中偶读很重要,java里面的函数通常叫做方法,其实是一个东西,使用函数可以简化更多的代码,代码结构看着更加清晰.今天我们来学学ES6语法中,函数有什么变化. 虽然现 ...

  5. （note）从小白到产品经理之路

    学习了云课堂的产品课程,整理出部分笔记,以作备用参考,方便实际运用过程中查看巩固. 1.产品工具:Axure.mindmanager.viso.办公软件wps 2.产品人需要具备的品格 富有同理心,习 ...

  6. coding++ ：Layui-监听事件

    在使用layui的form表单做验证提交的时候,如果结合vue,或者是三级联动的时候,就需要做事件监听了. 具体语法: form.on('event(过滤器值)', callback); 可以用于监听 ...

  7. iOS 页面流畅技巧(2)

    一.屏幕显示图像的原理 首先从过去的 CRT 显示器原理说起.CRT 的电子枪按照上面方式,从上到下一行行扫描,扫描完成后显示器就呈现一帧画面,随后电子枪回到初始位置继续下一次扫描.为了把显示器的显示 ...

  8. 如何使用Java中的Enum类

    Java1.5 中出现了枚举类型.当一个值都在一个固定的范围内变化,那就可以使用 enum 类型来定义.比如说,一周有七天,一年有四季. 没有枚举类的时候,我们用常量来定义一组范围值的: public ...

  9. 《Three.js 入门指南》1.3 - Three JS 功能预览

    [部分中英文对照] Cameras(照相机,控制投影方式) Camera OrthographicCamera 正交相机 PerspectiveCamera 透视相机 Core(核心对象) Buffe ...

  10. 剑指Offer系列之题1~题5

    目录 1.二维数组的查找 2.替换空格 3.从尾到头打印链表 4.链表中环的入口节点 5.重建二叉树 写在前面:本随笔中包含五道题:题目描述,题目思路以及对应解法. 1.二维数组的查找 在一个二维数组 ...