问题描述：

 <!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. JAVA多态

    多态是指当系统A访问系统B的服务时,系统B可以通过多种方式来提供服务,而这一切对系统A是透明的.比如动物园的饲养员能够给各种各样的动物喂食.下图显示了饲养员Feeder,食物Food和动物Animal ...

  2. ASP.NET Core File Providers

    原文地址:FileProvider By Steve Smith ASP.NET Core通过对File Providers的使用实现了对文件系统访问的抽象. 查看或下载示例代码 File Provi ...

  3. Winform简单调用WebApi

    WebAPI  Controllers public class SimuController : ApiController { //EF 5 BIM_GENERALDICTONARY_DBEnti ...

  4. Gate Of Babylon bzoj 1272

    Gate Of Babylon (1s 128MB) babylon [问题描述] [输入格式] [输出格式] [样例输入] 2 1 10 13 3 [样例输出] 12 [样例说明] [数据范围] 题 ...

  5. hadoop 2.7.2 + zookeeper 高可用集群部署

    一．环境说明 虚拟机:vmware 11 操作系统:Ubuntu 16.04 Hadoop版本:2.7.2 Zookeeper版本:3.4.9 二．节点部署说明 三．Hosts增加配置 sudo ge ...

  6. [deviceone开发]-Star分享的优惠券商户管理端App开源

    一.简介 这是一个优惠券的商主端,也就是配置发送优惠券的App 页面和交互还是像纳豆那样非常漂亮流畅,大家可以参考一下二.效果图 三.相关下载 https://github.com/do-projec ...

  7. Java学习-序列化

    参考资料: http://www.2cto.com/kf/201405/305380.html http://www.cnblogs.com/xdp-gacl/p/3777987.html   序列化 ...

  8. UIScrollView的封装

    UIScrollView的封装 效果 特点 1.用法简单,尺寸大小,随意设置位置 2.可以有多个数据源的数据,可以定制不通的界面(如同上图,一个有文字,一个没有文字) 3.能够实现点击事件 用法 1. ...

  9. SDK接入(3)之iOS内支付(In-App Purchase)接入

    SDK接入(3)之iOS内支付(In-App Purchase)接入 继整理了Android平台的SDK接入过程.再来分享下iOS平台的内支付(In-App Purchase)接入,作为笔者在游戏开发 ...

  10. Linux系统sar命令解析

    安装 如果系统没有该命令请安装: apt-get install sysstat yum install sysstat 安装完毕: vi /etc/default/sysstat ENABLED=& ...