CODEWITHSUNDEEP
androidhtmlcssmobiledrop-down-menu
Tommy Lee
Tommy Lee

Reputation: 794

Mobile: Hiding particular options in select box using CSS

@media (max-width: 767px){
    #nav-container option:nth-child(3), 
    option:nth-child(9), 
    option:nth-child(13) 
    {display: none !important;}
                               }

Above are my css codes in attempt to hide 3 particular options from showing in mobile view. However, only Chrome displays what I want using my phone. Firefox and Samsung's default browser doesn't hide that 3 particular options. Any idea on this?

Upvotes: 0

Views: 1470

Answers (2)

Evan Washkow
Evan Washkow

Reputation: 26

Although your styling does have concerns, the issue does not lie within your styling. Android "Spinners"--which are Android's native version of a drop-down menu--cannot be styled with CSS. Rather it is up to each browser to parse your CSS styles, and pass that same information to the Android Spinner instructing it to hide certain elements.

See http://jsbin.com/tenute, in which I did two things:

  1. Removed the extra complexity of a @media query: this will allow us to remove as many variables from the scene
  2. Made every option a minty green color

Now retest in Chrome and Firefox. Notice that--same as before--Chrome hides those options but Firefox does not. However, notice that both Spinners still remain white, even though the styling is instructing them to be green. (And very basic styling too, I might add). This is because, in this case, neither Chrome nor Firefox have programmed their Spinners to reflect background colors that come from the CSS.

Upvotes: 1

Sara Mote
Sara Mote

Reputation: 236

Do you have a link to view this?

Your media query looks okay - it might be your selectors.

You can test this by using the same class selectors to change another css property, my go-to is setting a new background color and seeing if it's applied. If it's not, perhaps try a different selector. Depending on your markup, nth-of-type might work.

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     background: green;

  }

If all the elements you're looking to hide are contained within the #nav-container, you'll need to use the parent id for each following:

@media (max-width: 767px) {

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     display: none;

  }

}

Alternatively, you can take a mobile first approach:

  /* mobile */

 #nav-container option:nth-child(3), 
 #nav-container option:nth-child(9), 
 #nav-container option:nth-child(13) {

   display: none;

}

 /* desktop */

 @media (min-width: 767px) {

   #nav-container option:nth-child(3), 
   #nav-container option:nth-child(9), 
   #nav-container option:nth-child(13) {

     display: block; /* or default display property */

  }

}

Upvotes: 0

Related Questions