Material Design Lite - HTML Select Styling Recommendation

Question

MDL has no HTML Select component. The MDL Menu component can be fashioned with text to operate sort of like a drop down but renders a long list such that the main page must be scrolled down to select items.

What is the best way to offer distinct choices in MDL? A toggle works for 2 choices but what if you have 12 choices, for example choosing the hour of day, or 50 choices for US states?

The basic HTML Select is functional but clashes with the look and feel of MDL and really ruins the UI ultimately making MDL less useful.

    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="demo-menu-lower-left">
            Testing <i class="material-icons">keyboard_arrow_down</i>
    </button>

Answer 1

I simply styled the HTML Select as best I could with the following. This works OK as a workaround.

.dds{
    border-style:solid;
    border-color:#e0e0e0;
    border-width: 0 0 1px 0;
    color:#9e9e9e;
    font-family: 'Roboto', sans-serif;
    font-size:1.2em;
    font-weight:100;
    outline: 0;
    margin-top:1.4em;
}