Html-IOS下input的样式添加不上的解决方案
2024-08-25 12:58:12
问题描述:
<!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
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
最新文章
- Matlab中的mapminmax函数学习
- 用程序获取 Internet 时间 无通用性程序后的暂用办法
- 『TCP/IP详解——卷一:协议』读书笔记——16
- cocos基础教程(9)声音和音效
- mv命令(转)
- spark与storm的对比
- bzoj1567: [JSOI2008]Blue Mary的战役地图
- leetcode4	Valid Palindrome回文数
- 矩形、占位符组件——axure线框图部件库介绍
- HBase_在Linux上安装以及运用
- Hybrid App开发之jQuery基础
- Git的commit your changes or stash them before you can merge
- python实现邮件的发送
- typeScript 学习
- vscode隐藏运行ts生成的js文件和map文件
- Delphi10.2 DPR文件
- 在cmd启动一个win32程序,printf把信息输出到启运它的那个CMD窗口
- [转][C#]TopSelf
- C_文件包含.h文件和包含.c文件总结
- Ubuntu16.04下配置pip国内镜像源加速安装【转】
热门文章
- 让VIM支持Python2 by update-alternatives
- A chatroom for all! Part 1 - Introduction to Node.js(转发)
- jQuery Lightbox图片放大预览
- JavaWeb_day02_登录校验_查询所有员工信息_DeBug
- El表达式的关系运算符
- Java第三方数据库连接池库-DBCP-C3P0-Tomcat内置连接池
- [连载]《C#通讯(串口和网络)框架的设计与实现》- 14.序列号的设计,不重复的实现一机一码
- linux(十三)__vsftpd服务器
- Dynamics CRM 2015-如何修改Optionset Default Value
- 分享iOS开发常用(三方类库,工具,高仿APP,实用网站,技术干货)