CSS - 在 iPhone 和 Safari 上隐藏选择菜单中的选项

Question

所以我有一个网站正在使用移动导航的选择菜单。我需要从列表中隐藏一些选项，并且已经能够在除 Safari 和 iPhone 之外的所有浏览器和设备上这样做。

这是我用来删除列表中第 7-11 项的 css：

 select.select-menu option:nth-child(n+7):nth-child(-n+11){
display: none !important;}

这在 Chrome 和我的 android 手机上按预期工作。但是，当您在 Safari 或 iPhone 上查看该站点时，选项不会隐藏并且仍然会显示。

我已经尝试了几种选择并对此事进行了大量研究，但找不到解决方案。我尝试使用 jQuery 从列表中删除项目，但也无法正常工作。

有没有一种方法可以隐藏 iPhone 和 Safari 上的选项？

编辑：

这是一个小提琴： https ://jsfiddle.net/cv6rubua/3/

原文由 Thomas Spade 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只有这对我有用 - 包裹你需要隐藏它的元素。如果隐藏与页面上的某些操作相关，则“if-check”不将其包装两次。

使用 jQuery 隐藏 iOS：

 if( !($(this).parent().is('span')) ) $(this).wrap('<span>');

使用 jQuery 为 iOS 取消隐藏：

 if( ($(this).parent().is('span')) ) $(this).unwrap();

原文由 Stan Fad 发布，翻译遵循 CC BY-SA 3.0 许可协议