select下拉框、输入框在IOS中出现阴影

Posted 2023-04-03

参考技术A 设置input的样式时加上：-webkit-appearance: none，这样之后input输入框就会像android上一样正常显示。

同理，给select加上样式-webkit-appearance: none，但是加上样式之后在ios上不会显示后面的小三角形，需要自己来添加。

目前有许多前端封装好的UI库，非常好用，比如：cube-UI等。

解决 input 输入框在 iOS 系统中无法输入内容

问题

input 输入框在 Android 系统可以输入和点击，但是在 iOS 系统上 input 输入框无法点击和输入。

解决

去掉下列样式

-webkit-touch-callout:none;
-webkit-user-select:none;

或者这样写

*:not(input, textarea) 
  -webkit-touch-callout: none;
  -webkit-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 属性允许禁用掉这一行为。

语法：

-webkit-touch-callout: default   /* 显示标注 */
-webkit-touch-callout: none      /* 禁用标注 */

-webkit-touch-callout: initial
-webkit-touch-callout: inherit
-webkit-touch-callout: unset

示例：

.example 
  -webkit-touch-callout: none;

兼容性：

iOS 2.0及更高版本的Safari浏览器可用
Android尚不明确