select在苹果手机上的兼容性

最新推荐文章于 2025-12-02 16:39:05 发布
原创 最新推荐文章于 2025-12-02 16:39:05 发布 · 968 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

本文详细解析了在页面中使用select选择框时，遇到的option内容在首次选择后无法再次显示的问题。阐述了该问题的原因在于选择后body未正确回滚，并提供了具体的解决代码，通过window.scrollTo方法实现页面的微调回滚。

问题：在页面中使用了select选择框后，第一次选择option中的内容是弹出的但是选中后再次点击选择，option中的内容不出现

原因及解决办法：

原因是弹窗弹出后，选择后，body没有回滚，造成了选择框在底部隐藏了；

解决办法在change中设置

window.scrollTo(0, document.body.scrollTop + 1);

document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);

让其进行回滚

追根溯源
关注
移动端苹果IOS中select的option值不显示问题解决
weixin_41346436的博客
12-26 3714
移动端苹果IOS中select的option值不显示问题解决 遇到一个问题就是最原始的select标签在安卓手机上显示正常，但是在IOS苹果高版本上点击select，在页面上有占位，随便点击也可以将值选在文本框中，但是内容不显示,直接留白 1:这种情况发生于高版本的IOS系统中，然后观察了一下请选择和动态加载的option有什么区别，就是动态加载的值只用label绑定了，option标签中间并没有...
ios部分机型出现select、input等控件点击后失效不可再次点击dug
qq_40665861的博客
11-12 1100
问题描述 在昨天晚上的时候测试突然告诉我一个问题，在iphone 6s中select选择器在第一次点击后，其他的选择无法点击。整个手机都属于暂时性死机状态。 问题分析 当时首先对代码进行了排查，排除是逻辑方面的问题。经过多方面验证发现只有6s会出现，这是对兼容性进行了进一步的考虑。 多方面兼容后，发现也不是兼容的问题。在一步步的实验中发现当点击后，需要滑动一次才可以继续点击，这个时候发现有可能是弹...
移动端苹果手机select兼容问题
林中明月间丶
04-04 8488
select{ -webkit-appearance: none; }
IOS与安卓关于select样式兼容性问题
helloword_js的博客
03-26 711
让我们先来看看IOS和安卓的区别 造成这样的原因是IOS有自己的默认样式 所以我们在兼容的时候首先清除默认的样式 -webkit-appearance: none; 然后select的边框已经倒三角样式都会被清除 所以我们需要自己绘制倒三角 添加border .slectIos1{ width: 0; height: 0; border-top: 1rem solid black;...
H5移动端select兼容苹果
Willow_Spring的博客
12-03 810
select在安卓显示如下 在苹果如下 用CSS解决 select{ -webkit-appearance: none; /*清除select默认样式*/ background: url("img/order_img/drop-down.png")no-repeat right; /*设置三角样式*/ background-size: 0.3rem; background-position-x: 96%; }= ...
select在ios和android中样式不兼容
qq_37672347的博客
09-18 1385
ios中select有默认样式，在Android中可以正常显示，但在ios中会变灰变短 这样式显然不能满足我们的需要，解决办法。 1：设置css ： -webkit-appearance: none; 去掉默认的样式。 2：右边的小三角使用一个图片定位在那里。 select{ -webkit-appearance: none; /*清除select默认样式*/...
elementUI 中的 el-select组件在苹果手机浏览器中使用通过远程搜索获取不到query的值
09-09
苹果手机浏览器的输入法可能存在兼容性问题，可尝试在 `remote-method` 里对 `query` 进行处理，避免空值或者异常字符。示例如下： ```javascript remoteMethod(query) { query = query ? query.trim() : ''; if ...
苹果手机的html的select没有下拉箭头
07-03
苹果手机（iOS系统）的Safari浏览器中，`<select>` 元素默认的样式可能会隐藏下拉箭头，因为iOS倾向于使用系统原生的选择控件，而不是显示传统网页中的箭头图标。这种情况通常是由于iOS的默认样式覆盖了HTML元素的...
H5-ios兼容性问题
叶小树咯
07-25 745
h5开发遇到的ios兼容性问题
26、iOS开发：设备兼容性与功能实现
最新发布
h0i1j2k3l的博客
12-02 14
本文详细介绍了iOS开发中如何处理设备差异，特别是iPhone与iPod Touch在相机和定位功能上的区别。通过使用UIImagePickerController检测相机可用性并结合UIActionSheet提供用户选择，确保应用在无相机设备上仍可正常运行。同时，利用Core Location框架实现位置信息获取，涵盖CLLocationManager的初始化、代理方法处理、精度设置及电池消耗优化。文章还强调了设备兼容性、用户权限处理和实际测试的重要性，并提供了代码示例与流程图，帮助开发者构建稳定、高效的
仿苹果风格的移动端Select选择插件
综上所述，该“移动设备 select jquery插件”不仅仅是一个简单的表单控件替换工具，更是融合了用户体验设计、触控交互优化、跨平台兼容性处理和前端工程化思想的综合性解决方案。它代表了在移动互联网发展初期，前端...
ios 下 select和option 无法隐藏指定元素
weixin_30553777的博客
07-06 530
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chro...
js实现删除select下拉框对应option（旧版本，现版本可以直接jQuery显示或隐藏，兼容IE）
Angelo的博客
01-18 717
下拉框代码：实现代码：
SELECT标签中OPTION的显隐控制(兼容IE和Safari)
Lime的博客
11-23 3407
问题描述： 在有些功能切换的时候，select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。 解决方案： 1、首先设置option的display:none的方案肯定是不可行了； 2、在option标签上面加上disabled="disabled"属性，表示不可用，这种方案只是让option不能选择，但没有隐藏掉...
解决el-select组件在IOS移动端的兼容问题，点击2次才能选中
奔跑吧代码
03-22 2235
解决el-select组件在IOS移动端的兼容问题，点击2次才能选中
javascript - 手机端兼容 苹果select刷新不出来的问题
09-12 347
安卓端加载选择框可以正常加载 IOS端无法加载 将attr 更换为 prop即可
uniapp写移动端，适配苹果手机底部导航栏，ios安全区问题,苹果手机遮挡底部信息，uview的u-action-sheet组件
THY0827的博客
10-25 1068
手机上有很多组件，需要手机底部弹窗来做选择,picker选择器，select列选择器呀这些，在苹果手机上会被底部nav遮住。采用了好几种配置的方式，多多少少都不太行，还是采用css来做吧，但是css来写想让它生效，可不是简单写写就行。3.模版当中加样式，因为我需要判断苹果手机才加样式，安卓不加，所以样式加了判断条件，大家看实际需求。组件中用人家封装的组件是这么用的，里面包括好几层，怎么拿到组件里面的样式设置。5.方法中去判断平台，加样式，这些都不详细说了。加上这个就完美解决了！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值