Tronic247 Material

Select menus

Edit this page

Filled Select

<div class="select-container filled">
    <label for="demoselect">Select</label>
    <select id="demoselect">
        <option></option>
        <option value="v">Option 1</option>
        <option value="v">Option 2</option>
        <option value="v">Option 3</option>
        <option value="v">Option 4</option>
        <option value="v">Option 5</option>
    </select>
</div>

Outlined Select

<div class="select-container outlined">
    <label for="demoselectoutlined">Select</label>
    <select id="demoselectoutlined">
        <option></option>
        <option value="v">Option 1</option>
        <option value="v">Option 2</option>
        <option value="v">Option 3</option>
        <option value="v">Option 4</option>
        <option value="v">Option 5</option>
    </select>
</div>

Border bottom Select

<div class="select-container border-bottom">
    <label for="demoselectborderb">Select</label>
    <select id="demoselectborderb">
        <option></option>
        <option value="v">Option 1</option>
        <option value="v">Option 2</option>
        <option value="v">Option 3</option>
        <option value="v">Option 4</option>
        <option value="v">Option 5</option>
    </select>
</div>

Disabled Items and optgroups

<div class="select-container filled">
    <label for="demoselectfilledd">Select</label>
    <select id="demoselectfilledd">
        <option></option>
        <option value="v">Option 1</option>
        <option value="v" disabled>Disabled</option>
        <option value="v" selected>Selected</option>
        <option value="v">Option 4</option>
        <optgroup label="Optgroup">
            <option value="v">Option 1</option>
            <option value="v" disabled>Disabled</option>
            <option value="v">Selected</option>
        </optgroup>
        <option value="v">Option 5</option>
    </select>
</div>

Disabled Select

<div class="select-container filled disabled" tabindex="-1">
    <label for="demoselect">Select</label>
    <select id="demoselect" disabled>
        <option></option>
        <option value="v">Option 1</option>
        <option value="v">Option 2</option>
    </select>
</div>

Error State

<div class="select-container filled error">
    <label for="demoselect">Select</label>
    <select id="demoselect">
        <option></option>
        <option value="v">Option 1</option>
        <option value="v">Option 2</option>
    </select>
</div>