摘要：<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> &n
<!DOCTYPE html>
<html 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狀態(tài)，否則active是不會起作用的
解決方法：
1、css給input添加： -webkit-appearance: none;【這個是為了去除IOS默認的input樣式】
2、手動激活active狀態(tài)，給body/html或元素上綁定touchstart事件：
js原生寫法
document.body.addEventListener("touchstart", function () { //空函數(shù)即可});jq寫法
$('body').on("touchstart",function(){ //空函數(shù)即可});當(dāng)然了，有的時候，這還不足以解決問題，有時你還需要這樣寫
$(function () { $('input').on("touchstart", function () { //空函數(shù)即可}); });等到頁面加載完成后，在執(zhí)行激活綁定事件，而且往往有的時候你必須在input上添加才會有效，具體是什么原因我還沒有研究清楚。
正確寫法：
<!DOCTYPE html>
<html 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>
