问题描述：

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style>

         input { width: 100px; height: 25px; background-color: #ff6a00; outline:none;}

         input:active{ background-color:#00ff21; transform: translate(2px,2px); -webkit-transform: translate(2px,2px); /*Google*/ -moz-transform: translate(2px,2px); /*Safari*/ -webkit-transform: translate(2px,2px); /*op*/}

     </style>

 </head>

 <body>

     <input type="button" value="刷 新" />

 </body>

 </html>

问题代码如上，input的css样式添加失效

（touch的样式active样式添加同样失效）

原因：

1、IOS默认给input添加的样式，我们的样式被覆盖了

2、IOS下input自己手动需激活active状态，否则active是不会起作用的

解决方法：

1、css给input添加： -webkit-appearance: none;【这个是为了去除IOS默认的input样式】

2、手动激活active状态，给body/html或元素上绑定touchstart事件：

js原生写法

document.body.addEventListener("touchstart", function () {  //空函数即可});

jq写法

$('body').on("touchstart",function(){   //空函数即可});

当然了，有的时候，这还不足以解决问题，有时你还需要这样写

$(function () { $('input').on("touchstart", function () {   //空函数即可});  });

等到页面加载完成后，在执行激活绑定事件，而且往往有的时候你必须在input上添加才会有效，具体是什么原因我还没有研究清楚。

正确写法：

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style>

         input { width: 100px; height: 25px; background-color: #ff6a00; outline:none; -webkit-appearance: none; }

         input:active{ background-color:#00ff21; transform: translate(2px,2px); -webkit-transform: translate(2px,2px); /*Google*/ -moz-transform: translate(2px,2px); /*Safari*/ -webkit-transform: translate(2px,2px); /*op*/}

     </style>

 </head>

 <body>

     <input type="button" value="刷 新" />

     <script>

         document.body.addEventListener("touchstart", function () {

         });

         //或

         $('input').on("touchstart", function () { });

         //或

         $(function () {

             $('input').on("touchstart", function () { });

         });

     </script>

 </body>

 </html>

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/5950280.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接

Html-IOS下input的样式添加不上的解决方案的更多相关文章

  1. IOS下 input 被软键盘方案遮盖问题解决

    前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...

  2. web前端 在 iOS下 input不能输入 以及获取焦点之后会出现蓝色的border轮廓

    iOS下 input 不能获取焦点 获取焦点后:设置border:none无效果 .hb_content input{ display: inline-block; margin-left: 0.22 ...

  3. ios下input focus弹出软键盘造成fixed元素位置移位

    正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3 ...

  4. ios下input获取焦点以及在软键盘的上面

    <!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...

  5. 解决只读时ios下input光标问题

    应用场景:在ios手机下对只读的input设置readonly=readonly属性还是会出现光标 解决方法: //解决ios日期光标问题 $("#Stime ,#provinceCity& ...

  6. 移动端Web开发,ios下 input为圆角

    在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...

  7. 在iOS下-input[disabled] 颜色变浅兼容&& input[readonly]仍可获取焦点解决方法

    目标:在写input输入框时,想让其只读不写. 环境:在iPhone上 本来用的时readonly,可是readonly,居然可以获取焦点,不能弹出键盘:安卓手机完全木有问题,所以去用了disable ...

  8. input(file)样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

  9. 使用PHPExcel单元格样式添加不上的原因

    按照文档上的样式设置方法设置样式,一直不成功.后来发现是得要在创建了sheet,并选择某一个sheet作为活动sheet后再设置才可以.这里记录一下.

随机推荐

  1. Redis分布式集群几点说道

    原文地址:http://www.cnblogs.com/verrion/p/redis_structure_type_selection.html  Redis分布式集群几点说道 Redis数据量日益 ...

  2. Navisworks Addin 插件集成

    调用Navisworks的 Api . 我这里是基于.NET 开发的. 我主要是尝试着获取一下工程量的API.不过还在研究. 插件的启动入口. //插件描述 [PluginAttribute(&quo ...

  3. [函數] Firemonkey Android 取得系统参数设定的字型大小

    Android 系统参数设定内,可以设定字型大小: 可以透过下面代码来取得字型大小比例: function FontScale: Single; var Resources: JResources; ...

  4. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...

  5. 关于Karaf Container 4.0.7

            Karaf是Apache旗下的一个开源项目.Karaf同时也是一个基于OSGi的运行环境,Karaf提供了一个轻量级的OSGi容器,可以用于部署各种组件,应用程序.Karaf提供了很多 ...

  6. SQLServer2005+获取表结构信息

    SELECT d.name TableName, a.colorder FieldNo,a.name FieldName, (case when COLUMNPROPERTY( a.id,a.name ...

  7. 用C#从数据库动态生成AdminLTE菜单的一种方法

    当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...

  8. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  9. 一款MVC5+EF+Bootstrap搭建的后台通用管理系统模板

    最近闲来无事,就用MVC5+EF+Bootstrap搭建了一个通用的后台管理系统的模板,里面使用到的技术包括: MVC,EF,T4模板批量生成 Jquery,jqGrid Bootstrap DDD ...

  10. AEAI ESB路由转换机制说明

    1. 背景概述 相信了解数通畅联的人对AEAI ESB并不陌生,其设计器ESBDesigner中内置组件有:路由和转换.数据适配器.协议适配器.协议接入适配器等4类组件,每类组件下面包含各种类型的组件 ...