问题
input 输入框在 Android 系统可以输入和点击,但是在 iOS 系统上 input 输入框无法点击和输入。
解决
去掉下列样式
touch-callout:none;
user-select:none;
或者这样写
*:not(input, textarea) {
touch-callout: none;
user-select: none;
}
拓展
关于 user-select 属性
定义和用法
user-select 属性规定是否能选取元素的文本。
在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。
语法
user-select: auto|none|text|all;
属性值
值 | 描述 |
auto | 默认。如果浏览器允许,则可以选择文本。 |
none | 防止文本选取。 |
text | 文本可被用户选取。 |
all | 单击选取文本,而不是双击。 |
关于 -webkit-touch-callout 属性
注意:该特性是非标准的,请尽量不要在生产环境中使用它!
概述:-webkit-touch-callout 这个CSS 属性禁用了默认的callout展示, callout 是指当触摸并按住一个元素的时候出现的提示。
当在iOS上一直按住一个目标元素时,Safari会展示一个关于这个链接的callout信息。webkit-touch-callout 属性允许禁用掉这一行为。
语法:
touch-callout: default /* 显示标注 */
touch-callout: none /* 禁用标注 */
touch-callout: initial
touch-callout: inherit
touch-callout: unset
示例:
.example {
touch-callout: none;
}
兼容性:
iOS 2.0及更高版本的Safari浏览器可用
Android尚不明确