如果给按钮定义 :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. 使用PostgreSQL注意事项

    一.大小写特别敏感 大写字段需要用“”引号(pg字段名使用“”,MySQL字段名使用``) ******表名以及字段名如果是小写但是为关键字,比如name,则也需使用"": 二.分 ...

  2. Tensorboard 详解（上篇）

    花间提壶华小厨 1. Tensorboard简介 对大部分人而言,深度神经网络就像一个黑盒子,其内部的组织.结构.以及其训练过程很难理清楚,这给深度神经网络原理的理解和工程化带来了很大的挑战.为了解决 ...

  3. .NET Core技术研究-中间件的由来和使用

    我们将原有ASP.NET应用升级到ASP.NET Core的过程中,会遇到一个新的概念:中间件. 中间件是ASP.NET Core全新引入的概念.中间件是一种装配到应用管道中以处理请求和响应的软件.  ...

  4. office2010安装与破解，笔者亲测可用！！！！！！

    我们首先需要准备office2010安装包与破相应的破解软件.软件包的获取方式:扫码关注[猿成长],,回复 office2010安装,即可获取,下载解压后文件目录结构如下图所示: 打开安装程序文件夹, ...

  5. sentry使用

    开篇-Sentry是什么 Sentry是开源错误跟踪,帮助开发人员实时监控和修复崩溃.不断重复.提高效率.改善用户体验. 这篇文章的作用 记录这篇文章是想分享一下,因为本人在配置时因为邮件服务花费了很 ...

  6. ios shell打包脚本 gym

    #! /bin/bash project_path=$() project_config=Release output_path=~/Desktop build_scheme=YKTicketsApp ...

  7. 在C#MVC三层项目中如何使用SprintNet

    0.添加dll文件 1.首先在根目录下新建一个文件夹[Config],然后新建2两个xml文件. 1-1[controllers.xml]用来配置需要创建的对象 1-2[service.xml]用来配 ...

  8. MATLAB——文件读写（1）

    1.文件打开关闭 (1)文件打开 fid=fopen(文件名,‘打开方式’)说明:其中fid用于存储文件句柄值,如果返回的句柄值大于0,则说明文件打开成功.文件名用字符串形式,表示待打开的数据文件.常 ...

  9. RecyclerView 的 Item 的单击事件

    RecyclerView 的每个Item的点击事件并没有像 ListView 一样封装在组件中,需要 Item 的单击事件时就需要自己去实现,在 Adapter 中为RecyclerView 添加单击 ...

  10. Cows POJ - 2481 （树状数组 + 单点更新 + 区间查询）

    Cows 思路:我们可以按照每个范围的S从小到大排序,相同的S按E从大到小排序,这样的好处是当前范围的S一定大于等于之前范围的S(即当前的范围可能被之前范围的包围),那么我们只需要统计之前的范围E比当 ...