The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Select styling being ignored

  • # March 12, 2013 at 9:51 am


    I am in the process of making one of my older websites responsive.

    If you follow this link: and reduce the browser width down to mobile size you will see the dropdown menu appear. Whatever CSS I apply to it seems to be ignored – in Webkit browsers at least.

    On iOS it seems to have a green to white gradient background as well?

    Any ideas?

    # March 12, 2013 at 10:10 am

    Hi jshjohnson!

    It looks like it’s working for me (Chrome for Windows). The only styling I see applied is style.css line 1078 which only sets the font, font size and min-height and only when the screen width is < 480px. You mentioned “in Webkit browsers at least”… does that you are seeing the green to white gradient background in both Chrome and Safari? Or maybe you have an extension/addon that is interfering?

    # March 12, 2013 at 10:32 am

    This reply has been reported for inappropriate content.


    I have applied Gill Sans as a font which it seems to be ignoring as well as a height. Any font size larger than 18px is also ignored. If it was an extension interfering, surely wouldn’t that show up in Chrome inspector?

    # March 12, 2013 at 11:06 am

    Style.css line 1010:

    #searchform {
    display: none;

    # March 12, 2013 at 11:31 am

    This reply has been reported for inappropriate content.

    @Merri what does that have to do with anything?

    # March 12, 2013 at 11:52 am

    Hmm, well I can change the font, size and height from the developer tools window. I set the font size to `40px` and ended up needing to add a `max-width:100%` to the select. But everything seems to work for me.

    And yes, you’d think it would show up in the inspector =/

    # March 12, 2013 at 1:25 pm

    @jshjohnson: ah sorry, I posted while eating and had a brain fart.

    All I can give for now is that I can also confirm everything to work just fine on various browsers. I guess the only glitch I can see is how Firefox doesn’t allow line-height for the select element and thus Home text is always at top of the box.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed