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/

Answer 1

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

使用jQuery为iOS隐藏：

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

使用jQuery取消隐藏iOS：

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

Answer 2

通过 Jquery，您可以prop("disabled", true)与hide(). 像这样：

$(this).prop("disabled", true); // for safari
$(this).hide();

这样选项将在大多数浏览器中隐藏。在 Safari 中它们将可见但被禁用。

我认为这是一个不错的选择。

Answer 3

根据你的需要，你有很多选择，我发现它display: none不适用于 Safari，所以这里有一个替代方法：

你可以简单地将其变得非常小并且不可见：

opacity: 0;
height: 0;
width: 0;
overflow: hidden;

这应该可以很好地工作，并且 chrome 和 safari 都应该支持！

祝你好运！