Normalize `select` element styling #151

Closed
visicode opened this Issue Dec 23, 2012 · 7 comments

3 participants

@visicode

To allow select to have a height on Safari for Mac, and add some consistency between browsers, just add:

@media screen and (-webkit-min-device-pixel-ratio:0) { /* For Safari and Chrome */
    select {
        border-color: #adadb4; /* Turns off Aqua */ 
    }
}
@necolas
Owner

What is "combo height"? Please provide a test case, a description of the problem, and how different browsers do things. These things will help me assess the situation. Thanks

@visicode

Hi,
Thanks for your answer.
If you try to modify a drop-down height using the css height property, nothing happens under Safari!
To allow it, it's necessary to inactivate the Mac effect, setting -webkit-appearance: menulist-button, or modifying the drop-down border or background-color.
The most consistent seams to set the border-color to #adadb4...
(more here: http://stackoverflow.com/questions/503101/text-size-for-drop-down-menu-input-select-not-working-in-safari)
Thanks

@allirense

I'm unable to replicate this issue. Perhaps this can be closed?

@visicode

Hi,
Just try to do this:

select {
  height: 50px;
}

Height will change on every browser i tried except Safari on Mac at least...

@necolas
Owner

Don't think this can be fixed without using -webkit-appearance: none;, which would involve re-styling the entire element. I'm not going to do that. This kind of thing can be handled further up the chain.

@necolas necolas closed this Jan 15, 2014
@visicode

This can be fixed using -webkit-appearance: menulist-button, so you don't need to re-style it!

@necolas
Owner

Actually, you can just set border-radius:0 and it will have the same consequences. But the appearance changes from the browser default. Since this is trivial to modify in code built on top of normalize, I'll leave it as is for now and revisit in the future if called for. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment