Normalize.css: Normalize `select` element styling

[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]

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]

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.

[visicode]

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

[necolas]

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!