html - 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 上的选项吗？

编辑:

这是一个 fiddle : https://jsfiddle.net/cv6rubua/3/

Answer 1

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

使用 jQuery 为 iOS 隐藏:

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

使用 jQuery 为 iOS 取消隐藏:

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