CSS – Hide Options From Select Menu on iPhone & Safari

15 Views

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:

Read More
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/

Post Views: 15

Related posts

8 comments

  1. 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();

  2. 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.

  3. I also had difficulties in Safari while trying to hide option in my select (from an extension) and decided to go this route.

    To “hide” the option in my select I replace the option with div, and then back again to option if I want to show it again.

    //if any div exists change back to option
function showAll(){
var nodesSnapshot = document.evaluate("//select/div", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('option');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}

//replace all option that contain text with div
function hideSome(){
var nodesSnapshot = document.evaluate("//select/option[text()[contains(.,'HideMe')]]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('div');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}

//replace all option with div
function hideAll(){
var nodesSnapshot = document.evaluate("//select/option", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('div');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}
    <button onclick="showAll();">showAll</button>
<button onclick="hideSome();">hideSome</button>
<button onclick="hideAll();">hideAll</button>


<select>
<option>HideMe</option>
<option>HideMe</option>
<option>ShowMe</option>
<option>HideMe</option>
<option>ShowMe</option>
</select>

  4. I found that removing the items rather than hiding them is easier.

    $(this).remove();

  5. 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();
  };
}

  6. You have a number of options depending on what you want, from I have found display: none does not work on safari so here is an alternative method:

    You can simply make it super small and invisible:

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

    This should work well, and should be supported by both chrome and safari!

    Good luck!

  7. You can’t. Safari uses an overlay for dropdowns… You literally have to remove them…. There is a hack using spans as non-valid syntax… Wouldn’t recommend using invalid syntax though

  8. The solution that worked for me was to create another hidden select which all the options, and clone the relevant ones to the visible select. this way you display one the options you want to display but still keep a record of the other options in a hidden list.

Comments are closed.