CSS - Hide Options From Select Menu on iPhone & Safari
<p>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. </p>

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

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

<p>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.</p>

<p>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.</p>

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

<p>EDIT:</p>

<p>Here's a fiddle:
<a href="https://jsfiddle.net/cv6rubua/3/" rel="noreferrer">https://jsfiddle.net/cv6rubua/3/</a></p>