CSS - Hide Options From Select Menu on iPhone & Safari

Question

So I have a site that is using a select menu for the mobile navigation. I'm needing to hide a few options from the list, and have been able to so on all browsers and devices except for Safari and iPhone.

Here's the css I used to remove items 7-11 on the list:

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

This is working as expected in Chrome and on my android phone. However, when you view the site in Safari or on an iPhone the options are not hidden and still show up.

I've tried several options and done a lot of research on the matter and can't find a solution. I tried removing items from the list using jQuery and couldn't get that to work either.

Is there a way I can hide the options on iPhone and Safari as well?

EDIT:

Here's a fiddle: https://jsfiddle.net/cv6rubua/3/

Answer 1

You can solve this using JavaScript

var selectOption = document.querySelectorAll('.select-menu option');

for (var i = 0; i < selectOption.length; i++) {
  var item = selectOption[i];
  if (item.innerHTML.charAt(0) === "–") {
    item.remove();
  };
}

I have forked the jsfiddle with a dynamic JavaScript solution: https://jsfiddle.net/davidgumzchoi/05ocw2x0/

Answer 2

Only this works for me - wrap in element you need to hide it. "if-check" for not wrapping it twice if hiding connected with some action on page.

Hide for iOS with jQuery:

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

Unhide for iOS with jQuery:

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

Answer 3

With Jquery you can use prop("disabled", true) together with hide(). Like this:

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

This way options will be hidden in most browsers. In Safari they will be visible but disabled.

I think this is a nice alternative.