问题描述：

 <!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. jQuery-1.9.1源码分析系列（十六）ajax——jsonp原理

    json jsonp 类型 "json":  把响应的结果当作 JSON 执行,并返回一个JavaScript对象.如果指定的是json,响应结果作为一个对象,在传递给成功处理函数 ...

  2. LINQ to SQL语句(20)之存储过程

    在我们编写程序中,往往需要一些存储过程,在LINQ to SQL中怎么使用呢?也许比原来的更简单些.下面我们以NORTHWND.MDF数据库中自带的几个存储过程来理解一下. 1.标量返回 在数据库中, ...

  3. 来玩Play框架03 模板

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在上一章节中,我把字符串通过ok()返回给客户.我可以把一个完整的html页面放入 ...

  4. QT数据库连接的几个重要函数的使用及注意事项（原创）

    注:在这里数据库对象等同于数据库连接对象,也就是QSqlDatabase类的对象 QSqlDatabase QSqlDatabase::addDatabase((const QString & ...

  5. 配置rsync服务，数据同步。

    这部分设计服务器端和客户端. [服务器端] 如果服务器没有安装rsync服务则使用yum安装rsync服务. yum install rsync 然后 vim /etc/xinetd.d/rsync ...

  6. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  7. 和transformjs一起摇摆

    写在前面 记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs ...

  8. 关getClass().getClassLoader()

    InputStream   is   =   getClass().getClassLoader().getResourceAsStream("helloworld.properties&q ...

  9. BI解决方案分享：地产BI数据分析系统的建设

    近几年中国地产行业发展迅猛,行业整合已成大势所趋,逐步由区域开发转变为集团化的跨地区综合开发商.然而,对于处在超常规速度发展的房地产企业来说,其面临的挑战也是超常规的.企业要在有限的资金和人力条件下, ...

  10. Android调用webservice的例子

    1.需要一个ksoap2-android-assembly-2.5.2-jar-with-dependencies.jar的架包. 2.需要知道webservice的命名空间 // WSDL文档中的命 ...