Html-IOS下input的样式添加不上的解决方案
问题描述：
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <style> 8 input { width: 100px; height: 25px; background-color: #ff6a00; outline:none;} 9 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*/} 10 </style> 11 </head> 12 <body> 13 <input type="button" value="刷 新" /> 14 </body> 15 </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原生写法
1 document.body.addEventListener("touchstart", function () { //空函数即可});
jq写法
1 $('body').on("touchstart",function(){ //空函数即可});
当然了，有的时候，这还不足以解决问题，有时你还需要这样写
1 $(function () { $('input').on("touchstart", function () { //空函数即可}); });
等到页面加载完成后，在执行激活绑定事件，而且往往有的时候你必须在input上添加才会有效，具体是什么原因我还没有研究清楚。
正确写法：
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <style> 8 input { width: 100px; height: 25px; background-color: #ff6a00; outline:none; -webkit-appearance: none; } 9 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*/} 10 </style> 11 </head> 12 <body> 13 <input type="button" value="刷 新" /> 14 <script> 15 document.body.addEventListener("touchstart", function () { 16 17 }); 18 19 //或 20 $('input').on("touchstart", function () { }); 21 22 23 24 //或 25 $(function () { 26 $('input').on("touchstart", function () { }); 27 }); 28 29 30 </script> 31 </body> 32 </html>
作者：leona
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
