Material Design Lite

Components

Select

Variations on Select.

Simple Select

Simple Select with arrow

<!-- Simple Select -->
    <div class="mdl-textfield mdl-js-textfield getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample1" readonly>
        <input type="hidden" value="" name="sample1">
        <label for="sample1" class="mdl-textfield__label">Country</label>
        <ul for="sample1" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>
                                            <!-- Simple Select with arrow -->
    <div class="mdl-textfield mdl-js-textfield getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample2" readonly>
        <input type="hidden" value="" name="sample2">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample2" class="mdl-textfield__label">Country</label>
        <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>

Country

Select with floating label

Select with floating label and arrow

<!-- Select with floating label -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample3" readonly>
        <input type="hidden" value="" name="sample3">
        <label for="sample3" class="mdl-textfield__label">Country</label>
        <ul for="sample3" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>
                                            <!-- Select with floating label and arrow -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample4" readonly>
        <input type="hidden" value="" name="sample4">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample4" class="mdl-textfield__label">Country</label>
        <ul for="sample4" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>

Country

Belarus
Brazil
Estonia
Finland
France
Germany
Poland
Russia

Country

Belarus
Brazil
Estonia
Finland
France
Germany
Poland
Russia

Select with fixed height

Pre-selected value

<!-- Select with fixed height -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
        <input type="text" value="" class="mdl-textfield__input" id="sample5" readonly>
        <input type="hidden" value="" name="sample5">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample5" class="mdl-textfield__label">Country</label>
        <ul for="sample5" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="BY">Belarus</li>
            <li class="mdl-menu__item" data-val="BR">Brazil</li>
            <li class="mdl-menu__item" data-val="ES">Estonia</li>
            <li class="mdl-menu__item" data-val="FI">Finland</li>
            <li class="mdl-menu__item" data-val="FR">France</li>
            <li class="mdl-menu__item" data-val="DE">Germany</li>
            <li class="mdl-menu__item" data-val="PL">Poland</li>
            <li class="mdl-menu__item" data-val="RU">Russia</li>
        </ul>
    </div>
        <!-- Pre-selected value -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
        <input type="text" value="" class="mdl-textfield__input" id="sample6" readonly>
        <input type="hidden" value="" name="sample6">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample6" class="mdl-textfield__label">Country</label>
        <ul for="sample6" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="BY" data-selected="true">Belarus</li>
            <li class="mdl-menu__item" data-val="BR">Brazil</li>
            <li class="mdl-menu__item" data-val="ES">Estonia</li>
            <li class="mdl-menu__item" data-val="FI">Finland</li>
            <li class="mdl-menu__item" data-val="FR">France</li>
            <li class="mdl-menu__item" data-val="DE">Germany</li>
            <li class="mdl-menu__item" data-val="PL">Poland</li>
            <li class="mdl-menu__item" data-val="RU">Russia</li>
        </ul>
    </div>

Introduction

The select component is an enhanced version of the standard HTML <input type="text">. A text field consists of a horizontal line indicating where select item displayed and and native mdl menu. The select component has mdl menu style.

Configuration options

The MDL CSS classes apply various predefined visual and behavioral enhancements to the select. The table below lists the available classes and their effects.

MDL class	Effect	Remarks
`getmdl-select__fix-height`	Limits height to 300px and add vertically scrollbar	Required

Download