如果给按钮定义 :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. Java 访问修饰符大全详解

    鉴于笔试面试总会遇到,决心仔细认真梳理一下: 1:涉及的关键字:public,default(表示缺省),protected,private,static,final,abstract. 2:关键字含 ...

  2. C# 基础知识系列- 6 Lambda表达式和Linq简单介绍

    前言 C#的lambda和Linq可以说是一大亮点,C#的Lambda无处不在,Linq在数据查询上也有着举足轻重的地位. 那么什么是Linq呢,Linq是 Language Intergrated ...

  3. OpenCV-Python 绘图功能 | 七

    目标 学习使用OpenCV绘制不同的几何形状 您将学习以下功能:cv.line(),cv.circle(),cv.rectangle(),cv.ellipse(),cv.putText()等. 代码 ...

  4. SVN: Cleanup failed update报错 文件被锁定lock办法，cleanup 失效报错。

    按照如下办法即可解决: 下载文件链接: https://pan.baidu.com/s/1Ump1BFihbX8izyAA4by5dA 提取码: ftsd 复制这段内容后打开百度网盘手机App,操作更 ...

  5. 12c OCR corrupted results in CRS stack down.

    12c OCR corrupted results in CRS stack down. 1. check crsd.trc2017-03-21 16:14:44.667838 :  CRSOCR:2 ...

  6. Codeforces题解集 1.0

    记录 Codeforces 2019年12月19日到 2020年2月12日 的部分比赛题 Educational Codeforces Round 82 (Rated for Div. 2) D Fi ...

  7. dp例题01. 任务价值最大化

    题目Description: 大凯有n项任务可选择去做, 分别对应有开始时间, 结束时间以及任务报酬, 同一时间内最多做一件任务, 现在大凯想知道最多能得到多少报酬, 于是把求解任务交给了你. 输入: ...

  8. Python 【基础面试题】

    前言 面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.以下五点建议希望对您有帮助,早日拿到一份心仪的offer. 做好细节工作,细致的人运气不会 ...

  9. wsl中配置SML环境

    配置SML/NJ #安装 sudo apt install smlnj #但是wsl不支持32位程序,所以需要下面配置 sudo dpkg --add-architecture i386 sudo a ...

  10. Vue设置路由跳转的两种方法： <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...